I'm having problem with CORS.
My Node.js Server with apollo-server-express(version 3.7)
My problem is CORS is not constant.
My React Project request api server and works well.
But sometimes api server response this error
Access to fetch at 'https://api.example.com/' from origin 'https://example.com' 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.
Why same client request sometime response cors error?
Please Help.
Related
I am developing a Laravel API + Vue.js frontend app. Those 2 projects are on separate servers. I am having a CORS policy problem in production (on local I had, but I managed to fix it).
So basically, there are 2 errors right now. I am having this error:
Access to XMLHttpRequest at '--Laravel url--' from origin '--Vue url--' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
While my co-worker is getting this error:
Access to XMLHttpRequest at '--Laravel url--' from origin '--Vue 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.
We tried a few things:
Configurating CORS on Laravel side:
setting CORS middleware - no effect
changing CORS config .php file - no effect
Configurating CORS on Vue side:
adding origin header to form - no effect
The response is also displaying in browser as being same-site although it is not.
Anyone can help? We have been searching for answer for nearly 3 days.
As Jazerix answered in a comment, going Sanctum is probably the right way because it has most stuff prepared.
On local development I am facing following error on ajax request:
Access to XMLHttpRequest at 'http://pmb.local/jsonapi/product' 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.
Need to the following change this this file
Ddont forget to run:
php artisan optimize
I have a Nifi cluster with a flow which starts with listenHTTP processor. Basically flow receives POST calls with JSON payload. It works fine with postman request or a curl call. But when a request comes from a web browser, the OPTION request fails with following error:
Access to fetch at 'https://{server_endpoint}/process' from
origin 'https://{client_endpoint}:3443' 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.
How should we configure cors in ListenHTTP processor.
The ListenHTTP does not support CORS. Your only option is to use a proxy server that will be the one to send your browser requests to the NiFi cluster.
I tried to post a request to my Laravel backend but failed to get the response as the error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/path. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel)" showed.
I have added Access-Control-Allow-Origin and Access-Control-Allow-Headers in both my client and server. Why does the error still showing?
Remove the client-side code you added to send Access-Control-Allow-Origin in the request.
(Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel)" showed.
I have added Access-Control-Allow-Origin and Access-Control-Allow-Headers in both my client and server. Why does the error still showing?
The error is showing because you added an Access-Control-Allow-Origin header to the client-side request. But Access-Control-Allow-Origin is a server response header. So if you send it from the client side in a request you’ll see the kind of error you’re seeing now.
“missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’“ is the browser telling you that your client code is sending an Access-Control-Allow-Origin request header, but the Access-Control-Allow-Headers response header the server has returned doesn’t list "Access-Control-Allow-Origin" as one of the header names it allows in requests.
So because of that, the browser isn’t letting your frontend JavaScript code read the response.
I am using Restify in my Heroku server. I am getting this error:
XMLHttpRequest cannot load https://xxx.xxx.com/charging. Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://xxx.xxx.com' is therefore not allowed access.
The response had HTTP status code 405.
My Restify configuration is:
server
.use(restify.fullResponse())
.use(restify.bodyParser())
.use(restify.queryParser())
.use(restify.CORS({
origins: ['https://xxx.xxx.com', 'http://xxx.xxx.com']
}));
What is missing in my configuration?
In some cases, you may need to use server.pre instead of server.use.
https://github.com/restify/node-restify/issues/573