Question

我正在使用angular 7，当我从本地计算机将数据发布到Web api时，它可以工作，但是当我在服务器上发布相同的Web api时，我可以从api获取数据，但是我不能发布数据。我收到CORS错误。

针对此问题，在服务器上发布了WEB API。

我已经安装了CROS nuget软件包，但仍然无法解决问题。

我尝试过更改Web api，还安装了CORS软件包，还尝试了Angular中的Proxy config，但无法正常工作。

错误：“已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'标头。”

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
  </customHeaders>
</httpProtocol>

Answer 1

我已经解决了使用“ proxy.conf.js”插入的问题（proxy.conf.json）文件。在src文件夹中创建“ proxy.conf.js”文件。和在“ proxy.conf.js”中编写如下代码。

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  "target": "http://10.1.5.13:9007",
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

并将“ angular.json”文件更改为

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "AngularTestApp:build",
            "proxyConfig": "src/proxy.conf.js"
          }

Run NPM start after doing all changes.

Answer 2

为Google Chrome浏览器下载此CORS browser extension，并在访问本地主机时启用CORS。它应该解决问题。

您可以详细了解此错误原因here

可能导致此问题的原因：


从本地提供的文件（从file：///YourApp/index.html到http://api.awesome.com的请求）中命中服务器

点击外部API（从http://yourapp.com到http://api.awesome.com的请求）。

达到内部API（从http://yourapp.com到http://api.yourapp.com的请求）。

在同一主机上命中另一个端口（webapp在http://localhost:3000上，API在http://localhost:4000上）

从https请求HTTP，反之亦然（从https://yourapp.com请求http://yourapp.com）

“无法在已发布的Web API上发布数据” – 405（不允许使用方法）

2 个答案: