Laravel7 CORS：被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin'

Question

Use case: VueJS/Laravel app has inventory. Calling Magento2 using SOAP API to update Qty from VueJS/Laravel.

Error as shared below :

Access to XMLHttpRequest at ' http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx ' from origin ' http://192.168.0.x ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Note: I am a beginner in this domain. I might be asking stupid questions. Please bear with me and requesting help here.

Tools/Apps used:

1. Laravel Framework 7.9.2 /Running on http://192.168.0.x
2. VueJS /Running on http://192.168.0.x
3. Magento2 /Running on http://xx.yyy.abc.123
4. Postman (Tool used to test SOAP API)

Debugging efforts:

1. URL http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx
2. Tried from postman: It works, Apended token into postmane and got the response.
3. Making AXIOS call from VueJS/Laravel application to Magento2: (Failed)

Origin: http://192.168.0.x 
Magento2: http://xx.yyy.abc.123

  axios.post("http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx",
  {

  })
  .then((response) =>
  {
        console.log("response.data",response.data);
        this.apiResponse = response.data;
        //this.getproduct();
  })
  .catch(error =>
  {
       alert('ERROR GETCATEGORY!!!! No Data found');
       console.log(error.response);
  });

4. Checked for 2 days now about CORS error and found that this is enabled by default in Laravel 7. Not sure why I am seeing this error even after using Laravel 7. There are very few answers or solutions specific to VueJS with Laravel 7.

Question:

1. What does this error means. I thought it is just calling from webpage1 to webpage2, it does not seem to work.
2. Do I need to make any changes on my VueJS/Laravel application. Am I missing anything further.

Please do let me know if you need any more information to help me in this regards. Thanks for your help. Regards,

Answer 1

I had got the same CORS error while working on a Vue.js project. I finally solved this issue just today in the morning. You can resolve this either by building a proxy server or another way would be to disable the security settings of your browser (eg, CHROME) for accessing cross origin apis. Both these solutions had worked for me. The later solution is the easiest solutoion and does not require any mock server or a proxy server to be build. Both these solutions can be resolved at the front end.

You can disable your browser (CHROME) security settings for accessing apis out of the origin by typing the below command on the terminal:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

After running the above command on your terminal, a new chrome window with security settings disabled will open up. Now, run your program (npm run serve / npm run dev) again and this time you will not get any CORS error and would be able to GET request using axios.

Hope this helps!