I would like to get an HTML page this one :https://cas.univ-lemans.fr/cas/login, but my response haven't body....
Anyone have a idea ?
my code :
this.header = {
"Access-Control-Allow-Origin": "*",
"mode": "no-cors",
"Content-Type" : "text/html"
};
fetch(url, this.header)
.then(function(response){
console.log(response);
response.text();
})
.then((body) => {
console.log(body);
})
console :
As per the response object in the console, response.ok is false that is why you are receiving body for it. Also as per the warning, there is a Cross-Origin issue in fetching the resource. Kindly, go through the following CORS origin link to understand how it works and how you can configure it.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
Also as your issues looks to be similar to CORB, it will better if you have a look in the CORB security implementation and how you can by pass it.
https://www.chromium.org/Home/chromium-security/corb-for-developers
Related
I'm trying to use react-axios to query a graphql endpoint but I'm encountering a problem with CORS.
Access to XMLHttpRequest at 'https://rickandmortyapi.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Here it is my setup:
const characterQuery = `{
characters(page: 2, filter: { name: "rick" }) {
info {
count
}
results {
name
status
species
gender
image
}
}
}`
const axiosInstance = axios.create({
data: characterQuery,
headers: {"Access-Control-Allow-Origin": "*"}
})
<AxiosProvider instance={axiosInstance}>
<Post url="https://rickandmortyapi.com/graphql">
{(response: any) => {
console.log(response);
}}
</Post>
</AxiosProvider>
Can someone help me? Thanks
CORS is a pain, always, the problem is that the header you pass is the one the server should give you.
You can't force the server to pass the header if they don't already, that the whole point of this protection, avoiding hacker pretending to be other ppl websites.
So the API you are trying to reach must have the CORS header or it will not work
You can play around with fetch see if you have better luck than axios.
Fetch provide some amount of control over your CORS settings, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
fetch('https://rickandmortyapi.com/graphql', {
method: 'POST',
mode: 'cors',
headers: { "content-type": "application/json" },
body: JSON.stringify({
query: `{
character(id: 1) {
name
}
}`
})
})
This request work with fetch for me, uppon testing, if the content-type was not set to application/json the server failed with error 500 instead of showing a 400 bad request
Edit again, it works with axios too, are you sure you get a CORS error ?
I'm fairly new to making API requests. I'm am trying to set up an incoming slack webhook using a simple axios post request from my React project, however I keep receiving the CORS policy error. The request works perfectly in insomnia.
I'm using ngrok to expose my web server running on my local machine to the internet (I assumed this would correct the issue.) So I'm making the request from https://...ngrok.io, however I'm still receiving 'Status Code: 400' in my network tab along with the error above.
axios({
method: "post",
url:
"https://hooks.slack.com/services/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",
headers: { "Content-type": "application/json" },
data: { text: "Hello, World!" },
}).then(
(response) => {
console.log(response);
},
(error) => {
console.log(error);
}
);
};
There are similar errors on stackoverflow, but none fix my error. I'd really like to understand why this is happening so any advice would be appreciated.
Fixed it, for those having the same issue:
What worked for me is setting Content-Type header to application/x-www-form-urlencoded. found it in this thread: https://github.com/axios/axios/issues/475 It appears that this triggers "simple request" and therefore avoids triggering CORS preflight. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests
I hope you are OK given the current World we all live in. Please can you help with an AWS API Gateway CORS issue. Here is what I have done and yet I still get a
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://XXXXX.execute-api.eu-west-1.amazonaws.com/live/record?id=8. (Reason: CORS request did not succeed).
Response. I am passing an AWS API request through to a Lambda function shown below.
return {
"statusCode": 200,
"body": JSON.stringify({
record: values[0],
prev: values[1],
next: values[2]
}),
"headers": {
"Content-Type": "application/json",
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "OPTIONS,GET",
"Access-Contol-Allow-Credentials": true
}
}
Within the proxy response I have the following headers within the OPTIONS method
And my Axios request within my create-react-app is thus...
useEffect(() => {
axios.get(`http://XXXXX.execute-api.eu-west-1.amazonaws.com/live/record?id=${id}`,{
crossdomain: true
}).then((response) => {
console.log(response)
setRecord(response.data.record)
setNext(response.data.next)
setPrev(response.data.prev)
setMarker([response.data.record.y, response.data.record.x])
})
},[id])
Any ideas?!
OK - solved. Not sure which of the moving parts was needed. Originally I had https but changed it to http as a part of the testing. Changed it back, and it works. I would be interested to know if something is not needed here.
I have been implementing the Dropbox API and Dropbox Chooser into a React application. When I call 'oauth2/authorize' for the login page, I receive the correct HTML, but when I load it I receive 404 errors for all of the image files that would help style it. I attached a screenshot to show what the error looks like. Any idea why it's happening or how to fix it?
The call :
axios({
method: 'get',
url: 'https://www.dropbox.com/oauth2/authorize?client_id=' + APP_KEY + '&response_type=code',
headers: {
'Content-Type' : 'application/json' ,
'Authorization' : AUTH
}
}).then(function (res) {
let pretty = stringifyObject(res.data, {
singleQuotes: false
});
response.send(pretty);
})
.catch(function (error) {
response.send(error.response.data);
});
The fetch :
fetch(URL + '/api/login', {method: "GET"})
.then((res)=>{ return res.text() })
.then((text)=>{
let html = React.createElement('div',{dangerouslySetInnerHTML: {__html:text}});
})
You're downloading the data for Dropbox's /oauth2/authorize, but https://www.dropbox.com/oauth2/authorize is actually a web page, not an API call, so you should not be using your HTTPS client like this to download the HTML data.
You should instead be directing the user to that https://www.dropbox.com/oauth2/authorize... page in their browser. For example, you can construct the https://www.dropbox.com/oauth2/authorize... URL and then put it in an <a> HTML link for the user to click on, or redirect them there via JavaScript, depending on what makes sense for your use case.
I’m mainly a front end guy, and I’m having some issues getting data back from an api call. I think I just don’t understand something properly, so it’s proving to be massively frustrating. I wonder if anyone can offer some input.
I make the call like this:
var config = {
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/xml',
},
proxy: {
host: '127.0.0.1',
port: 3000
}
};
axios
.post(
`https://login.salesforce.com/services/oauth2/token?grant_type=authorization_code&redirect_uri=http://localhost:3000/callback/&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=${authCode}`,
config
)
.then(res => {
console.log(`statusCode: ${res.statusCode}`);
console.log('Result:', res);
})
.catch(error => {
console.error('Error:', error);
});
Then the response I get is this:
Access to XMLHttpRequest at 'https://login.salesforce.com/services/oauth2/token?
grant_type=authorization_code&redirect_uri=http://localhost:3000/callback/&client_id=CLINET_ID&client_secret=CLIENT_SECRET&code=AUTH_CODE'
from origin 'http://localhost:3000' 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.
and this:
POST https://login.salesforce.com/services/oauth2/token?grant_type=authorization_code&redirect_uri=https://localhost:3000/callback/&client_id=3[ID]&client_secret=[SECRET]&code=[CODE] 400 (Bad Request)
But if I put this link in my browser: https://login.salesforce.com/services/oauth2/token?grant_type=authorization_code&redirect_uri=http://localhost:3000/callback/&client_id=CLINET_ID&client_secret=CLIENT_SECRET&code=AUTH_CODE I can see it’s an XML file with all the info I need. So why can’t I just get that info in my response?
This is what I see when I paste the link in my browser:
<OAuth>
<access_token>
{Token}
</access_token>
<refresh_token>
{Token}
</refresh_token>
<signature>{Signature}</signature>
<scope>refresh_token api full</scope>
<id_token>
{Token}
</id_token>
<instance_url>https://um5.salesforce.com</instance_url>
<id>
{ID}</id>
<token_type>Bearer</token_type>
<issued_at>1558167449074</issued_at>
</OAuth>
I've obviously taken out the actual tokens. This is the info I need.
Please can someone assist me in actually accessing that XML info on the front end? Id I do the request on Postman, I get exactly what I need.
I fixed it by using this code on a Node server and seemed to be getting the response I needed:
var request = require('request');
var options = {
url: `https://login.salesforce.com/services/oauth2/token?grant_type=authorization_code&redirect_uri=http://localhost:3000/callback/&client_id=CLIENT_ID.&client_secret=CLIENT_SECRET&code=${token}`
};
function callback(error, response, body) {
if (!error) {
console.log('Body: ', body);
} else {
console.log('Error: ', error);
}
}
I hope this helps someone. Salesforce documentation is very disjointed and complicated.