从源“http://localhost:4200”访问“http://localhost:1111/...”的 XMLHttpRequest 已被 CORS 策略阻止：

Posted 2023-02-27

【中文标题】从源“http://localhost:4200”访问“http://localhost:1111/...”的 XMLHttpRequest 已被 CORS 策略阻止：

【英文标题】：Access to XMLHttpRequest at 'http://localhost:1111/...' from origin 'http://localhost:4200' has been blocked by CORS policy:

【发布时间】：2019-10-31 21:09:37

【问题描述】：

跨源未发生，被 CORS 政策阻止。

我在 Windows 系统上。

在-.service.ts 文件中：

 makeHeaders() 
    const headers = new HttpHeaders(
      'content':"application/json",
      'Content-Type': 'application/x-www-form-urlencoded',
      // 'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Origin': 'http://localhost:4200',
      'Access-Control-Allow-Methods': 'OPTIONS, GET, POST',
      'Access-Control-Allow-Headers': 'Origin, Content-Type, Accept, Access-Control-Allow-Origin, Authorization, X-Requested-With'
      )
    return headers;
  

在proxy.conf.json 文件中：

"target": "http://localhost:1111"

我在浏览器控制台中收到此错误：

从源“http://localhost:4200”对“http://localhost:1111/api/v1/employees/create”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。 core.js:15724 ERROR HttpErrorResponse headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:1111/api/v1/employees/create", ok: false, ...

谢谢

【问题讨论】：

cors 问题无法从客户端应用程序修复。我可以看到您正在使用代理，但它没有正确设置。

签出：medium.com/@spencerfeng/…

【参考方案1】：

你可以试试这个

app.options("/*", function(req, res, next) 
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
);

app.all('*', function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    next();
);

当您在 localhost 上工作时，您需要安装插件。

铬

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

火狐

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

谢谢

【讨论】：

仍然出现同样的错误。从源“localhost:4200”访问“localhost:1111/api/v1/employees”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

chrome.google.com/webstore/detail/allow-control-allow-origi/… 可以解决您的本地开发或测试问题。