We Keep Coding

403 error when I try to make a request to my backend from my frontend although I set `Access-Control-Allow-Origin` to "*"`

I have a problem that has been blocking me for several days and I don't understand where it comes from.
I have read a lot on the internet and I can't find a solution to solve my problem exactly.
I'll start: I just implemented a frontend/backend solution that I've just deployed in production. My backend and frontend are in a different port each. However, I got the famous error No 'Access-Origin' header is present on the requested resource.
I managed to solve this problem by adding an Access-Control-Allow-Origin header in Nginx:
more_set_headers 'Access-Control-Allow-Origin: *';
The error disappeared after that, then I got an error but in Axios this time. It is a 403 error ERR_BAD_REQUEST - Request failed with status code 403 - Invalid CORS request.
So here I am, I despair a bit.
I added this code in AXIOS in order to give it the header (axios.js) :
export default boot(async ({ app }) => {
axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
});
But it still doesn't work.
So I analyzed the response I get when I send the request and here it is:
I saw that there was as Referrer-Policy: strict-origin-when-cross-origin
So I tried to change this mode, by adding it in the headers and it didn't work. And I changed this mode in my browser and it still doesn't work.
So here's the thing, can anybody help me? I don't expect an answer but I really can't understand what's blocking and it's bothering me in my debugging.
What are the CORS missing ? How and where I can add them ?

`the page is being unloaded` error

I was working with a NodeJS-ReactJS Isomorphic App, and when I click on a Link I'm getting an error saying
Uncaught (in promise) Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
The first two reasons (offline and CORS) I heard about. What is the the page is being unloaded error means? How it may cause the browser not navigating to need.

Your Error is
Uncaught (in promise) Error: Request has been terminated
This error is caused when the request in the promise is terminated before it is resolved or rejected. This can happen if (Possible causes)
the network is offline : There is a network failure and the connection to the url using which the request was being processed is lost.
Origin is not allowed by Access-Control-Allow-Origin : The request is rejected due to absence of proper CORS headers.
the page is being unloaded : The page making the request is closed before the request completed.
Of the above reasons, the most probable cause relevant to your case would be either 1 or 2, since you get the error on clicking a Link to navigate to a component. Please check the requests being made by the new component that is being loaded using the Link.
Edit:
If you look at the error message screen shot, it clearly states that the error occured at line no. 73194 of app.js at PromiseRequest in node_modules/superagent/lib/client.js.Request.crossDomainError. So the reason for your error is a CORS error which is described in number 2 above.

'cause Link component is using Location.push to do the redirection, while Location.push method cannot redirect to another domain.
So my solutions are:
Use window.open('http://your.new.domain.com/index', '_self')
Use <a href="http://your.new.domain.com/index">

It seems you have not enabled the cors in your node server.
Suggested Steps:
npm install cors
use it in app.js (node server)
.
var cors = require('cors');
var app = express();
app.use(cors()); //Enable CORS

Mozilla Persona

I know a lot of code, but I'm a complete scrub when it comes to xhr.setRequestHeader in html. I've set it up so a user can be logged in using Mozilla's Persona log in, but the console always returns errors:
Refused to set unsafe header "Content-length"
Refused to set unsafe header "Connection"
[Error] Failed to load resource: the server responded with a status of 405 (Method Not Allowed) (sign-in, line 0)
I've set up the html pages... somewhat, but I'd love some help. my website can be found at https://agstp.tk and https://github.com/August712/august712.github.io. Thanks!
(Oh, and can someone explain to me what a header is? As I said, I'm new to this.)

How to handle CORS error code?

Edit: I just realized this is a duplicate of Recommended solution for AJAX, CORS, Chrome & HTTP error codes (401,403,404,500), and he tried the idea I propose at the end. But I can't tell if he succeeded (dud user?), and no one else has posted a solution or even a comment, so I think it's worth fishing for new answers.
Problem:
I send a properly-executed (edit: IMproperly-executed. End of story...) CORS request.
The server receives the request and attempts to process it.
The server returns an error response, for example a 422 Unprocessable Entity, along with JSON information about the errors. The idea is that my app could receive this error information and handle it appropriately in the UI.
The browser blocks my error handler from getting the response content, or even getting the status code.
Showing that the browser received the 401 status code but treated it as a CORS security error:
The response object, showing that my code cannot access the response data (data: "", status: 0):
How have other people handled this limitation? My best guess right now is to hijack an HTTP "success" code (2XX) as an error code, and then include the error information in the response. This prevents me from using the ajax error handlers in a normal way, but I'm handling this as a global ajax filter anyway, so this filter would capture the deviant success code and trigger the error handlers instead.

The console message indicates that the server isn't sending the required Access-Control-Allow-Origin header when it sends the 401 response code.
You won't be able to use the CORS error handler to inject content into the DOM unless you fix that.
The server is likely sending the header correctly on responses with a 200 response code. It needs to do it for other response codes, though, if you wish to use data from those response codes.
Fix that on the server end before making design compromises on the client side. That may solve your problem straight away.

It seems it's an opaque response where you can't obtain the headers or the response. And everything is set to null or empty.
https://developer.mozilla.org/en-US/docs/Web/API/Response/type
Or maybe in the server you should add:
Access-Control-Allow-Origin: *

Very late answer but in case someone wants to check whether an error occurred while sending an XMLHttpRequest and then take appropriate actions (on the CLIENT side), then this is a quick workaround:
try{
request.send();
}catch(err){
if(e.toString().startsWith("NetworkError")){
//pasre the string to check error code
//and take appropriate actions
}
}
This is needed because the onreadystatechange function doesn't get executed when a NetworkError occurs and, in fact, the whole script is terminated.

Refused to get unsafe header "ETag"

I'm using azure Mobile service version "MobileServices.Web-1.1.5.min.js" and when I update a table in database im getting this error on the debug console ("CHROME")
> Refused to get unsafe header "ETag" MobileServices.Web-1.1.5.min.js:2
> getItemFromResponse MobileServices.Web-1.1.5.min.js:2 (anonymous
> function) MobileServices.Web-1.1.5.min.js:2 c
> MobileServices.Web-1.1.5.min.js:2 (anonymous function)
> azureService.js?bust=1400282269337:10 r.onreadystatechange
this did not happened with the older version of the MobileServices.
How to correct this?
Thanks in advance.

The short answer is that you can't do anything to correct it.
This error is browser implementation dependent and you can safely ignore it. It has to do with CORS configuration in Mobile Services. When the update to the table completes successfully, MobileServices sends the updated object back in the response. One of the response headers is "ETag" which some browsers/versions mistakenly identify as dangerous. As far as I know there is nothing you can do to make the console error go away via your code.
If you run the same exact code in Firefox, you will not get the error.

You may just create a PHP "proxy" that uses cURL or file_get_content to fetch the remote content.
You may add the headers Access-Control-Allow-Origin: * or replace the * with your domain-name(s). Last thing is the Access-Control-Expose-Headers that limits the exposure of headers,
for example if you choose to response with access-control-expose-headers:Client-Protocol- your JavaScript based xhr object (for example)
-- calling for xhr.getAllResponseHeaders() will give you pragma, content-type, cache-control, expires (if any exist), skipping few more useful such as Content-Length and X-... ones.. :(