CORS blocks requests, what to do?

Question

JavaScript

I am sending all the headers in the request

const headers = new HttpHeaders({
  'Content-Type':  'application/xml',
  'Accept':  'application/xml',
  'Response-Type': 'text',
  'Access-Control-Allow-Origin': '*',
  'SOAPAction': '',
})
console.log(headers)
return this.http.post('http://site.ru', query, { headers }).subscribe(res => {
  console.log('res', res);
}, error => console.log('error', error));

On the back, everyone added
Response Headers too

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1728000
Age: 0
Connection: Keep-Alive
Content-Length: 0
Content-Type: text/plain charset=UTF-8
Date: Fri, 15 Nov 2019 08:19:38 GMT
Proxy-Connection: Keep-Alive
Server: nginx/1.12.2
Via: 1.1 forcepoint-wcg.soglasie.ru, 1.1 TMG-NODE1

But the error is still there

Access to XMLHttpRequest at 'http://site.ru' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Answer 1

It looks like you need to add the access-control-allow-origin header to the Access-Control-Allow-Headers list

Answer 2

If you are using Chrome, this might be the reason. Install the CORS browser extension

Answer 3

in preflight response.

He makes the OPTIONS request first, but the headers in your GET / POST didn’t bother him, he hasn’t reached them yet.

Answer 4

create a proxy.config.json in the root directory of the project and write the config

{
  "/api": {
    "target": "http://localhost:9000",
    "secure": false
  }
}

in package.json run the project with npm run start