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.
Related
``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 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'm trying to recover some data from a government api from my country.
But i'm having a issue with CORS.
Access to XMLHttpRequest at 'http://www.portaltransparencia.gov.br/api-de-dados/bolsa-familia-por-municipio?mesAno=202004&codigoIbge=5300108&pagina=1' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
That's the error and this line of code is my axios code:
let headers = {
'Accept': '*/*',
'chave-api-dados': 'cec73fb24c54ff134d2053da6b471467'
}
axios
.get(url, { headers })
.then((response) => {
const { benefits } = response.data;
this.gov_benefitsF = benefits;
console.log(benefits);
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
What should I do to make this working? I'm using this extension CORS Allow Access and there's nothing working here
Browser extensions which add CORS headers in responses don’t generate responses to pre-flight OPTIONS requests.
You need the server to grant you permission, or to use a proxy.
I'm working with Vue to interact with an external API on a Drupal website, but in order to do so dynamically per Drupal user, I need to get a token from Drupal first. To do so, I'm trying to do two GET requests. The first gets me a bearer token out of Drupal, and the second uses it to authenticate the third-party API request.
Below is what I'm trying – I'm able to get the token successfully in the first request's response, but not when I try to use it in the header of my second request. If I try hardcoding the token that I see in the console log, it does work, so I know none of that is the issue. It's just that this.jwt['data']['token'] in the second request's headers seems to not pull back the token.
What do I need to adjust in order to access the token from the first response as part of the headers of my second request?
created() {
axios
.get('/jwt/token')
.then(response => {
this.jwt = response
console.log(this.jwt['data']['token']) // this does show what I want to access later
})
},
mounted() {
axios
.get('/comment/doc/' + this.id, {
headers: { Authorization: "Bearer " + this.jwt['data']['token'] } // ...but this doesn't work
})
.then(response => {
this.comments = response
})
},
It's likely the response to the token request has not finished by the time the component mounts, at which point this.jwt is not yet assigned.
I would move the token request into the mounted hook, fetching comments only when the token request succeeds:
export default {
mounted() {
axios
.get('/jwt/token')
.then(tokenResp => {
this.jwt = tokenResp
axios
.get('/comment/doc/' + this.id, {
headers: { Authorization: 'Bearer ' + this.jwt['data']['token'] }
})
.then(commentsResp => {
this.comments = commentsResp
})
})
}
}
I'm trying to grab an authentication token using axios in a react app.
Here is the error I'm getting is:
"XMLHttpRequest cannot load https://api.mmitnetwork.com/Token. Response for preflight has invalid HTTP status code 400"
Here is my code.
var App = React.createClass({
getInitialState() {
return {
token: ''
}
},
componentDidMount() {
var _this = this;
axios.post('https://api.mmitnetwork.com/Token', {
grant_type: 'password',
username: 'jpdesigning',
password: 'Upahem2_88'
}).then((response) => {
console.log('Success!')
_this.setState({
token: response.data
})
}).catch((error) => {
console.log(error)
})
},
render() {
return (
<div className="App">
{this.state.token}
</div>
);
}
})
export default App;
Your server needs to allow cross-origin (CORS) clients to access your headers by setting the following header on your server's response and telling it which headers they are (here you are allowing two headers: Authorization & Permissions - i.e. including custom headers)
Access-Control-Expose-Headers: Authorization, Permissions
Headers that are accessible by default:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
Read here Access-Control-Expose-Headers
example from php server for full CORS access
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Expose-Headers: Authorization");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size,
X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");
you need to set withCredentials: true, header , this will send the cookie along with this request