I have a problem on my next.js app.
I try to make a get request from the client side on this endpoint:
https://fr.pornhub.com/webmasters/search
when the request is made on back side all work but when she is send from client i get cors error
The problem is if I try to make it like that
return
fetch('http://www.pornhub.com/webmasters/search?page=2', {
headers: {
// 'Access-Control-Allow-Origin': '*',
},
})
.then((r) => r.json())
.then((data) => {
console.log(data);
return data;
});
I get this error:
'Access to fetch at 'http://www.pornhub.com/webmasters/search?page=2'
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.'
And if I uncomment Access-Control-Allow-Origin this I get this one:
'Access to fetch at 'http://www.pornhub.com/webmasters/search?page=2'
from origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
Redirect is not allowed for a preflight request.'
If I understand goodly I can't use options on this endpoint but I cannot add Access-Control-Allow-Origin without option preflight?
So how resolve that?
Related
I'm trying to fetch some data from the Django Rest API. But browser throw cors policy error.
let headersList = {Accept: '*/*'}
fetch(url, {
method: 'GET',
headers: headersList,
})
.then(function (response) {
return response.json()
})
.then(function (data) {
console.log(data)
})
Access to fetch at 'http://127.0.0.1:8000/blog/1' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch
the resource with CORS disabled.
I also include cors-header in django api.
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True
I have built API in Google Cloud Function. The CORS error occurs when I try to fetch API directly. Although I added Access-Control-Allow-Origin, it failed.
The error:
'https://xxxxxxx.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
const apiURL = 'https://xxxxxxx.com'
const headers = new Headers();
headers.set("Content-type", "application/json");
headers.set("Access-Control-Allow-Origin", "*");
const createRes = await fetch(
`${apiURL}/testFetch`,
{
method: "POST",
headers: headers,
body: JSON.stringify({
test: "test"
}),
}
);
Access-Control-Allow-Origin is a response header. It should be a part of your response, not the request. Please ensure that your API returns the corresponding header.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
i got an error when trying to access some API from web called rajaongkir api it shows an error 400 and no access control origin. it's need a header 'key' to work i already test it on postman and it works well. please help me
Code:
componentDidMount(){
const key = {
method: 'GET',
headers: { 'key': '11sss8ba9eeb9e4845c01edc3e62e62b80b', 'content-type': 'application/json' },
url: 'https://api.rajaongkir.com/starter/province'
}
axios(key).then(response => {
this.setState({ provinsi: response.data.results });
}).catch(error => {
console.log(error)
})
}
error:
Failed to load resource: the server responded with a status of 400 (Bad Request)
:8000/#/profil:1
Access to XMLHttpRequest at 'https://api.rajaongkir.com/starter/province' from origin 'http://127.0.0.1:8000' 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 have tried allowing origin access and it's just removing the No "access-control.." but still got blocked by cors policy
install Allow CORS: Access-Control-Allow-Origin extension in the browser
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
Access to XMLHttpRequest at 'https://api-v3.igdb.com/games/?search=nfs&fields=name,genres.name,first_release_date,cover.*&limit=10&offset=0' 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.
i am not understarding how to solve this error.
i need help for cross origin in localhost:3000
show code like this:
var headers = {'user-key': '**********************',
'Accept': 'application/json',
"Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
'Access-Control-Allow-Credentials': true
}
var dataurl = 'https://api-v3.igdb.com/games/?search=nfs&fields=name,genres.name,first_release_date,cover.*&limit=10&offset=0'
axios.post( dataurl, '' , { crossDomain: true,headers:headers })
.then(resData => {
console.log(resData)
})
.catch(err =>{
console.error(err)
})
CORS policy is handled by the server not the clinet -- you can't make a cross origin request to a server if the server doesn't return the Access-Control-* headers in response to a preflight request.
Not all requests are subject to CORS checking -- it is the presence of the "user-key" header that is triggering it from your page. But what you are doing is exactly what CORS is designed to prevent from happening: your site is causing the user's browser to send user's information to a third-party site.
On my C# web api I have cors enabled i.e.
[EnableCors(origins: "*", headers: "*", methods: "*")]
and then in my angular js site I am calling post API as such
authService.login = function (credentials) {
return $http
.post(WEB_CONFIG.login, credentials)
.then(function (res) {
Session.create(res.data.Email, res.data.Roles,res.data.Username);
return res.data.user;
});
};
The angular site is making the request from localhost:9000, and the API is located at localhost
getting the error
XMLHttpRequest cannot load http://localhost/mysite/api/user/login. 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:9000' is therefore not allowed access.
Why am I getting this error with Cors enabled ?
Try this configuration.
cors:
allowed-origins: "*"
allowed-methods: GET, PUT, POST, DELETE, OPTIONS
allowed-headers: "*"
exposed-headers:
allow-credentials: true
max-age: 1800