``I am new with API requests, I have to use an API with authentication but I have an error. I have tried to solve the cors but I have not found the solution. When I put mode no-cors I have error 401. The API is external, I haven't access to modify anything
fetch("https://xxxxxxx",{
method:"GET",
headers: {
'Content-type' : 'application/json',
'Access-Control-Allow-Origin': '*',
"X-AMC-Vendor-Key": "xxxxxxxxx"
}
})
.then(res => res.json())
.then(
(result) => {
console.log('rsult 1', result)
},
(error) => {
// handle error
console.log('error', error)
}
)
Server also needs to allow cors, or add allow cors to response object.
Access-Control-Allow-Origin : //set this field as the client domain or *
Access-Control-Allow-Origin : http://example.client.come // this will give example.client.com as a client to bypass cors by browser
or
Access-Control-Allow-Origin: * // this will allow any client server to access the api on server domain
I am working with vue and axios.
In one part of my project i am able to do post requests:
await axios.post(http://127.0.0.1:7000/favorite',body)
.then((response)=>
{
console.log(response.data)
}
)
.catch((error) =>
{
console.error(error)
})
But in another part in another file i am getting CORS error.
The code is almost the same:
await axios.post('http://127.0.0.1:7000/movie',body)
.then((response)=>
{
console.log("update ok")
}
).catch((error) =>
{
console.error(error)
})
and i see in my api terminal an OPTIONS request
The CORS settings in my api are right:
CORS_ORIFN_ALLOW_ALL = True
Also i can do successful post requests from postman.
I tried everything, what could be wrong?
I have a Vue.js application that uses axios to send request to ApiGee Server.
This is the code i use to send request to APIgee.
const headers = {
'X-API-Key': 'randomKey123123'
}
return axios({
method: 'get',
url: url,
headers: headers
}).then(response => {
console.log(response)
})
from the ApiGee, I can see OPTIONS request being received first since I done the request from the client side browser.
I can also see the X-API-Key header key but the value is missing.
The error I'm getting from the browser console is
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
Below code helped me you can try this format:
created() {
// POST request using axios with set headers
const article = { title: "Vue POST Request Example" };
const headers = {
'X-API-Key': 'randomKey123123'
};
axios.post(url, article, { headers })
.then(response => console.log(response.data)
);
}
I want to access data from Companies House
I have an account
I createad an app
I get an API key
On JavaScript domains I have my URL.
When I try to do a request I get a CORS ERROR, and I am not sure why.
axios
.get(this.$companiesHouseUrl, {
params: {
q: this.search_for_company
},
crossDomain: true,
headers: {
Authorization: "Basic " + btoa(this.$companiesHouseKey + ":")
}
})
.then(response => {
console.log("Response:", response);
})
.catch(e => {
console.log("Error:", e);
});
On there forum I found this article, but still..
Access to XMLHttpRequest at 'https://api.companieshouse.gov.uk/?q=as'
from origin 'http://URL' 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.
I'm having a problem with cors. I don't have access to the server, providing the 3rd party API, but it does use the right headers to provide me access. I know, because a native XHR request works, with just putting the authorization and client_id headers, which are required from the api to be set.
I couldn't anyhow make it work with Axios, spent 3 days on this. I'll be really glad if someone helps me out! Please look at the code I made some comments there.
This is the native XHR request, which works:
var data = "{\"birthday\":\"1981-07-07\",\"email\":\"asdiiii#mail.com\",\"phone\":\"1234578901\"}";
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.response);
}
});
xhr.open("POST", "cross-url/api/detail");
xhr.setRequestHeader("authorization", "fake");
xhr.setRequestHeader("client_id", "fake");
xhr.setRequestHeader("content-type", "application/json");
xhr.send(data);
Axios code, which doesn't work:
axios.defaults.headers.common['Accept'] = 'application/json, text/plain'
const instance = axios.create({
baseURL: 'cross-url',
// crossdomain:true, // this doesn't help
//mode:'cors', // this doesn't help too
/*
headers: {
'content-type':'application/json',
'client_id':'client_id_here',
'access-control-allow-origin':'*', // if I put this I get an error it's denied by 'access-control-allow-headers'
'Access-Control-Allow-Headers':
'Accept,Origin,Authorization,client_id,content-type,x-requested-with', // If I put this I get still an error that the header doesn't allow origin'
'Access-Control-Allow-Credentials': 'true',
},
*/
headers: {
'client_id':'fake',
},
transformRequest: [
(data,headers) => {
delete headers.common['X-CSRF-TOKEN']
console.log(data)
// return JSON.stringify(data) // this also doesn't work'
return data
},
],
});
instance.defaults.headers.common['authorization'] = 'fake';
const postData3 = {
email:'fake',
phone:'123123123',
birthday:'1981-07-07',
}
instance.post('/api/detail', postData3).then((response) => {
console.log(response)
}).catch((e) => {
console.log(e)
console.log(e.request)
})
The server determines what headers are allowed, what methods are allowed, and what hosts are allowed.
access-control-allow-xxx are a server-to-client headers, and for all practical purposes, no servers will accept them.
Concerning CORS
Remove your access-control.xxx headers and then look at the response. If denied, the server will let you know why.
If you do not have access to the server, and your host, method, and/or client-headers are denied, all you can do is use a proxy (forward your calls from the browser to an intermediate server). You will need access to some server for that however.