没有“访问控制允许来源”？

Question

I used request in React to get data from api but I'm getting this error :

Failed to load https://xxxx/api/yyyy?results=1000 : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8000 ' is therefore not allowed access.

I enabled cross-origin resource sharing in my chrome but I face the same error

this is the route

Route::group(['middleware'=>'cors:api'],function(){
Route::get('/xxxx','yyyyController@yyyFunction');
});

and this is the cors middleware

public function handle($request, Closure $next)
   {
       return $next($request)
       ->header('Access-Control-Allow-Origin', '*')
       ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')

       ->header('Access-Control-Allow-Headers', 'Content-Type, Content-Range, Content-Disposition, Content-Description')
       ->header('Connection', 'close')
       ->header('Cache-Control', 'max-age=2592000')
       //->header('Transfer-Encoding', 'chunked')

       ;
   }

Answer 1

If you call an API from browser but this endpoint has not been defined the CORS, Browser will block the request and show the error like in your question. You can refer this doc to learn more about CORS

Answer 2

Try this is work for me.

***reactjs use axios

const data = { 'id': 'xx', 'article': 'dd' };
const url = 'http://localhost:8080/path'
const options = {
  method: 'POST',
  data: qs.stringify(data),
  url,
};
axios(options)
  .then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

Hope for help.