No Access-Control-Allow-Origin header is present on the requested resource error

Question

I m trying to fetch the feed of a news website  Thought I d use google s feed API to convert the feedburner feed into json  The following url will return 10 posts from the feed  in json format  http   ajax googleapis com ajax services feed load v 1 0 amp num 10 amp q http   feeds feedburner com mathrubhumi  I used the following code to get the contents of above url    ajax     type   GET     dataType   jsonp     url   http   ajax googleapis com ajax services feed load     data         v    1 0        num    10        q    http   feeds feedburner com mathrubhumi         success  function result                          but it s not working and I m getting the following error     XMLHttpRequest cannot load   http   ajax googleapis com ajax services feed load v 1 0 amp num 10 amp q http 3A 2F 2Ffeeds feedburner com 2Fmathrubhumi    No  Access-Control-Allow-Origin  header is present on the requested   resource  Origin  http   localhost  is therefore not allowed access    How do I fix this

User · Answer

Try this - set Ajax call by setting up the header as follows:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

Then run your code by opening Chrome with the following command line:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

User · Answer

cors unblock works great for chrome 78   COrs unb   1   https   chrome google com webstore detail cors-unblock lfhmikememgdcahcdlaciloancbhjino  it s a plugin for google chrome called  cors unblock   Summary  No more CORS error by appending  Access-Control-Allow-Origin     header to local and remote web requests when enabled  This extension provides control over XMLHttpRequest and fetch methods by providing custom  access-control-allow-origin  and  access-control-allow-methods  headers to every requests that the browser receives  A user can toggle the extension on and off from the toolbar button  To modify how these headers are altered  use the right-click context menu items  You can customize what method are allowed  The default option is to allow  GET    PUT    POST    DELETE    HEAD    OPTIONS    PATCH  methods  You can also ask the extension not to overwrite these headers when the server already fills them

User · Answer

well  another way is that use cors proxy  you just need to add https   cors-anywhere herokuapp com  before your URL so your URL will be like https   cors-anywhere herokuapp com http   ajax googleapis com ajax services feed load  The proxy server receives the http   ajax googleapis com ajax services feed load from the URL above  Then it makes the request to get that server   s response  And finally  the proxy applies the  Access-Control-Allow-Origin     to that original response  This solution is great because it works in both development and production  In summary  you   re taking advantage of the fact that the same-origin policy is only implemented in browser-to-server communication  Which means it doesn   t have to be enforced in server-to-server communication  you can read more about the solution here on Medium 3 Ways to Fix the CORS Error

User · Answer

For development you can use https   cors-anywhere herokuapp com   for production is better to set up your own proxy   x000D   x000D  async function read     x000D     let r  await  await fetch  https   cors-anywhere herokuapp com http   ajax googleapis com ajax services feed load v 1 0 amp num 10 amp q http   feeds feedburner com mathrubhumi    json    x000D     console log r   x000D    x000D   x000D  read    x000D   x000D   x000D

User · Answer

I believe this might likely be that Chrome does not support localhost to go through the Access-Control-Allow-Origin -- see Chrome issue  To have Chrome send Access-Control-Allow-Origin in the header  just alias your localhost in your  etc hosts file to some other domain  like   127 0 0 1   localhost yourdomain com   Then if you d access your script using yourdomain com instead of localhost  the call should succeed

User · Answer

Chrome doesn t allow you to integrate two different localhost that s why we are getting this error  You just have to include Microsoft Visual Studio Web Api Core package from nuget manager And add the two lines of code in WebApi project s in your WebApiConfig cs  file   var cors   new EnableCorsAttribute                 config EnableCors cors     Then all done

User · Answer

Please use  CrossOrigin on the backendside in Spring boot controller  either class level or method level  as the solution for Chrome error  No  Access-Control-Allow-Origin  header is present on the requested resource    This solution is working for me 100          Example   Class level    CrossOrigin  Controller public class UploadController     ----- OR -------     Example   Method level    CrossOrigin origins    http   localhost 3000   maxAge   3600   RequestMapping value     loadAllCars        ResponseBody     public List lt Car gt  loadAllCars       Ref  https   spring io blog 2015 06 08 cors-support-in-spring-framework

User · Answer

If you use Google Chrome browser you can hack with an extension   You can find a Chrome extension that will modify CORS headers on the fly in your application  Obviously  this is Chrome only  but I like that it works with zero changes anywhere at all   You can use it for debugging your app on a local machine  if everything works in production    Notice  If URL becomes broken the extension name is Access-Control-Allow-Origin     I recommend you to disable this extension when you not working on your stuff  because  for example  youtube does not work with this extension

User · Answer

Just FYI  I noticed this information from the jQuery documentation which I believe applies to this issue      Due to browser security restrictions  most  Ajax  requests are subject to the same origin policy  the request can not successfully retrieve data from a different domain  subdomain  port  or protocol    Changing the hosts file like  thanix didn t work for me  but the extension mentioned by  dkruchok did solve the problem

User · Answer

If its calling spring boot service  you can handle it using below code    Bean public WebMvcConfigurer corsConfigurer         return new WebMvcConfigurerAdapter              Override         public void addCorsMappings CorsRegistry registry                registry addMapping                             allowedOrigins                           allowedMethods  GET    POST    PUT    DELETE    HEAD    OPTIONS                        allowedHeaders       Access-Control-Allow-Headers    origin    Content-type    accept    x-requested-with    x-requested-by     What is this for                       allowCredentials true

[javascript] No 'Access-Control-Allow-Origin' header is present on the requested resource error

Examples related to javascript

Examples related to jquery

Examples related to json

Examples related to ajax

Examples related to cors