javascriptjqueryvue.jsvuejs2

How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?


I am working on an app using Vue js. According to my setting I need to pass to a variable to my URL when setting change.

<!-- language: lang-js -->

    $.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
      // some code...
    });

But when my app hit on URL, it shows the following message.

Failed to load http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26: Redirect from 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26' to 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Solution

  • In addition to what awd mentioned about getting the person responsible for the server to reconfigure (an impractical solution for local development) I use a change-origin chrome plugin like this:

    1. Moesif Orign & CORS Changer (use to be free but now wants a work email address >_>)
    2. Allow CORS: Access-Control-Allow-Origin (tested in 2023)

    You can make your local dev server (ex: localhost:8080) to appear to be coming from 172.16.1.157:8002 or any other domain.

    In case the 2nd plugin link breaks in the future or the plugin writer decides to capitalize off the fame of this thread, open your browser's plugin marketplace and search "allow cors", there's going to be a bunch of them.