XMLHttpRequest cannot load in angular - angularjs

I couldn't call my service which gives an error
index.html:1 XMLHttpRequest cannot load http://localhost:14652/api/Employee. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1873' is therefore not allowed access.
What should i do?

Your browser won't let you make this request because the Access-Control-Allow-Origin (necessary for a cross-domain request) is missing in the header of whatever send your api, if you just want to make some tests you can disable it on your browser by launching it with the following flags:
google-chrome --disable-web-security --allow-file-access-from-files
But you should really read this : http://www.eriwen.com/javascript/how-to-cors/ and have cors working on your server

Related

How to resolve Access-Control-Allow-Origin error with Azure AD

I am getting an error when I try to make request from my react SPA application to get id and access token from Azure AD. Below is the error from the browser console log:
Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenant id}/oauth2/token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am trying PKCE flow for my SPA and I am not using any JS library. I am making hte request with plain XMLHttpRequest.
Please suggest what I am missing.
You can use this error with install "Allow CORS: Access-Control-Allow-Origin" or same extention on your browser.

CORS blocking content only on Firefox and Safari and only onClick()

I'm building a react.js app and I think I have CORS issues but I can't create a server. I'm therefore using a proxy (such as this one https://cors-anywhere.herokuapp.com/${myApiEndpointHere}).
When I'm using Chrome, I'm able to successfully fetch the data. However when I'm using Firefox or Safari, I get these issues listed below. This CORS issue (on Firefox and Safari) seems also to only happen when the scroll is triggered because both for Firefox, Safari and Chrome, I'm able to get my content and log in to the console.
Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg.
(Reason: missing token ‘user-agent’ in CORS header
‘Access-Control-Allow-Headers’ from CORS preflight channel).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg.
(Reason: CORS request did not succeed).
TypeError: NetworkError when attempting to fetch resource.
Safari:
Request header field User-Agent is not allowed by
Access-Control-Allow-Headers.
Fetch API cannot load
https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg
due to access control checks.
https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg
Failed to load resource: Request header field User-Agent is not
allowed by Access-Control-Allow-Headers.
Error: The error you provided does not contain a stack trace.
Unhandled Promise Rejection: TypeError: Request header field
User-Agent is not allowed by Access-Control-Allow-Headers.
You should read this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
And add this header to the response from the proxy server: Access-Control-Allow-Headers: *

CORS error when updating a contact in Stamplay

When calling
JavaScript
Stamplay.Object('contact').update()
I'm getting this error:
JavaScript
PUT https://myappid.stamplayapp.com/api/cobject/v1/contact
index.html:1 XMLHttpRequest cannot load https://myappid.stamplayapp.com/api/cobject/v1/contact.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://www.example.com' is therefore not allowed access.
The response had HTTP status code 404.
You need CORS support in the response of https://myappid.stamplayapp.com/api/cobject/v1/contact which means the HEADER should contain something like the following line:
Access-Control-Allow-Origin: https://www.example.com

Angular JS request to remote Sails server

I'm trying to make a request to a remote server running with Sails JS (NodeJS) using AngularJS in the frontend and I'm getting this origin 'null' error:
XMLHttpRequest cannot load http://remoteserver:1337/login/. The 'Access-Control-Allow-Origin' header contains the invalid value ''. Origin 'null' is therefore not allowed access.
My request looks somethign like:
$http.post('http://remoteserver:1337/login/', { email: userData.email, password: userData.password});
Any ideas?
You nead the server to enable CORS (cross origin resource sharing),
from Sails.js cors documentation (http://sailsjs.org/documentation/concepts/security/cors)
To allow cross-origin requests from any domain to any route in your app, simply enable allRoutes in config/cors.js:
allRoutes: true
and here is a brief explanation about what CORS is and why it is needed:
http://enable-cors.org/index.html

Sails.js modified header - cross domain

does anybody know where I can set a header in Sailsjs?
I have to set the Access-Control-Allow-Origin header that I can use my sails instance as API.
Currently I get this error if I try to send a request via $http.get in AngularJs
[Error] XMLHttpRequest cannot load http://acreasyURL.io/signin. Origin http://myhostOnMyMac.io:8000 is not allowed by Access-Control-Allow-Origin.
Any idea?
Cheers!!
Normally, you don't have to set it manually.
Sails has some CORS functionality built in:
https://github.com/balderdashy/sails-docs/blob/bc148104378f1ad590a69220c25f60fe41a59790/config.cors.md

Resources