I am using SocketIO to create a web chat application.
When I work locally everything is fine, but when I release it to our live domain I get the following error:
Access to XMLHttpRequest at
'https://example.com:2096/socket.io/?EIO=3&transport=polling&t=1586507948354-0'
from origin 'https://example.com' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Here is how I connect from the client to the server:
var socket = io(document.domain + ':' + supPort, {secure: true});
I have researched and I was advised to put this into the virtual host config file of the domain in Apache2:
Header always set Access-Control-Allow-Origin: "*"
However the error is still the same.
Why am I receiving this error? How can I fix it?
Related
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.
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.
I am using websockets to communicate between server and client. I followed this documentation to implement websocket dependecy. Now when I try to connect via example client page it produces the following error:
Access to XMLHttpRequest at '....' from origin 'null' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
I have tried adding .setAllowedOrigins("*") to WebSocketConfig but it didn't fix this. What is the solution?
As the error message says you are sending a request with credentials set to include, I guess you are sending some kind of token/access data with your request.
When doing so your server must respond with the correct origin. If you are in development try setting your localhost. For example .setAllowedOrigins("http://localhost:8080") or what ever you are using. In production you need to replace that with your deployment url.
You might find success with .setAllowedOriginsPattern("*").
See the following documentation for more stricter patterns.
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
Am working in Mobile App develoment using HTML5 + Phonegap. Currently am working a mobile App using XMLRPC and its working fine. (Android and iOS)
I need to work the same application as a website in browsers. (using HTML5).
But when am trying to Run my application on website i am getting this error :
XMLHttpRequest cannot load 'Client' URL'. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost <http://localhost/>' is therefore not allowed access.
When am search experts says that use JSONP. But using same XMLRPC method can i work it ?
For example ;
For a Login purposes am using ;
$.xmlrpc({
url: 'http://clienturl/xmlrpc/common',
methodName: 'login',
params: [Database_name','user_name','Password'],
success: function(response, status, jqXHR) {
alert('success'); },
error: OnError
});
Its working fine as a Mobile Application.
But gets Access-Control-Allow-Origin cross domain issue when i am trying to run as a Website.
How can i fix this ?
By default the SOP (same origin policy) allows cross-origin requests, but it prevents receiving the responses of those requests. The Access-Control-Allow-Origin in your error message is a CORS (cross-origin resource sharing) header. It tells the browser that you allow reading the responses of a domain (your XMLRPC server's domain) by sending requests from another domain (your XMLRPC client's domain). So you have to send back CORS allow headers from your server if you want to call it with AJAX.
note: CORS won't work in old browsers.
Possible solutions:
If you call http://clienturl/xmlrpc/common from http://localhost then the
response.header('Access-Control-Allow-Origin', "*")
is one not so secure solution according to this: Origin http://localhost is not allowed by Access-Control-Allow-Origin
But you can always add another hostname (e.g. http://client.xml.rpc) for your client, for example by windows you can modify the hosts file and add a binding using the IIS server.
I don't recommend this solution, because it is a security risk with the allow credentials header.
Another more secure options is to make a list of allowed hosts, check from which host you got the actual request, and send back the proper header:
if (allowedHosts.contains(request.host))
if (request.host== "http://localhost")
response.header('Access-Control-Allow-Origin', "null");
else
response.header('Access-Control-Allow-Origin', request.host);
else
response.header('Access-Control-Allow-Origin', server.host);
This is the proper solution with multiple hosts, because if you allow credentials for *, then everybody will be able to read and write the session of a logged in user.
By http://localhost and file:/// IRIs you have to use the null origin. I am unsure about other protocols, I guess in the current browsers you have to use null origin by them as well.