axios vs fetch - no-cors mode...
See original GitHub issueAxios - fails
axios('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', {
method: 'HEAD',
mode: 'no-cors',
headers: {
'Access-Control-Allow-Origin': '*',
Accept: 'application/json',
'Content-Type': 'application/json',
},
withCredentials: true,
credentials: 'same-origin',
crossdomain: true,
}).then((response) => {
console.log(response);
}).catch((e) => {
console.log(e);
});
Fetch - works
const testURL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
const myInit = {
method: 'HEAD',
mode: 'no-cors',
};
const myRequest = new Request(testURL, myInit);
fetch(myRequest).then(function(response) {
return response;
}).then(function(response) {
console.log(response);
}).catch(function(e){
console.log(e);
});
Summary
in Axios I get the following cors error but if I replace with standard fetch it works fine. I’ve tried a few different configurations with axios and must be missing something?
Error:
Failed to load https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js: 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:8080' is therefore not allowed access.
Context
- axios version: * axios v0.17.1
- Environment: * Chrome 63.0.3239.132 (Official Build) (64-bit)
Issue Analytics
- State:
- Created 6 years ago
- Reactions:35
- Comments:17 (2 by maintainers)
Top Results From Across the Web
Axios vs. fetch(): Which is best for making HTTP requests?
To send data, fetch() uses the body property for a post request to send data to the endpoint, while Axios uses the data...
Read more >mode: 'no-cors' working with fetch but fails for axios
Whereas fetch is based on Request API, which allows specifying mode: "no-cors", axios is based on XHR, which has no support for specifying ......
Read more >JavaScript Guide: Axios vs. Fetch - Pluralsight
The Fetch API provides a JavaScript interface for accessing and manipulating ... 3 mode: 'cors', // no-cors, *cors, same-origin 4 cache: ...
Read more >Request to api from axios (cross domain) (CORS) error
I'm try to fetch data from bank api with AXIOS and heve an error. I suffer 3 days with this error. I already...
Read more >Http Requests using Fetch API and Axios | by Reem Shaikh
Fetch and Axios are very similar in functionality. Some developers prefer Axios over built-in APIs for its ease of use. However, Fetch API...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @JohnRSim,
It’s important to note is that
mode
,credentials
, andcrossdomain
aren’t supported for configuring Axios. The reason why your example works when usingfetch
is because those options are part of the Request API (docs formode
are here).Probably TMI, but Axios uses a XMLHttpRequest under the hood, not Request.
I believe that your request using Axios fails because CORS is still being enforced, though I’m not sure why you’re getting a Network Error. I’ll try to duplicate this locally as well.
so there is no way to make axios bypassing cors errors?