无法从 localhost:4200 调用 API - Angular答案

【问题标题】：Cannot call API from localhost:4200 - Angular无法从 localhost:4200 调用 API - Angular
【发布时间】：2020-06-29 16:04:41
【问题描述】：

我正在做一个 Angular 项目。我需要测试来自 Angular 应用程序的 API 调用，但它不起作用。它返回错误，

访问 XMLHttpRequest 在 'http://...../api/v1/user/authen' 来自原产地 “http://localhost:4200”已被 CORS 策略阻止：响应预检请求未通过访问控制检查：它没有 HTTP 正常状态。

在服务器上已经设置了Access-Control-Allow-Origin: '*'

我还制作了一个简单的html+jquery文件来测试调用API，效果很好。

  function callApi(){
      $.ajax({
      type: "POST",
      url: 'http://..../api/v1/user/authen',
      data: {
        "user": "admin",
        "password": "123456"
      },
      success: function(data){
        console.log(data);
      },
    });
  }

但是从 Angular 应用程序我仍然得到了错误。我需要在 Angular 应用程序上专门设置什么吗？

【问题讨论】：

问题可能出在服务器上。也许框架以某种方式错过了访问控制允许来源。您可能应该发布服务器代码
我们必须从 api 或服务器端启用 CORS。这不是角度代码的问题。
快速检查 - 1) 我们是否调用了正确的 API？ 2) 在 api 的 chrome 网络选项卡中，我们可以看到 Access-Control-Allow-Origin: '*' 吗？根据我的经验提出的问题
您在后端使用什么语言？你能告诉我们一些你添加 Access-Control-Allow-Origin: '*' 的后端代码吗？

标签： angular

【解决方案1】：

这可能是服务器本身的问题，它不允许访问 API 表单 localhost:4200. 您可以通过禁用 google chrome 安全性并尝试访问 API 来运行您的应用。

在您的 Windows 机器中打开运行并粘贴以下链接以禁用网络安全并尝试点击 API。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
--disable-web-security --user-data-dir="C:\tmpChromeSession"

【讨论】：

抱歉，我用的是 Macbook。
我没在mac上用过，但是你可以在你的Macbook上试试。打开 -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
如果 API 在禁用安全模式下工作正常，则服务器站点存在问题允许访问原始代码。
很好，成功了！

【解决方案2】：

我不是很清楚，但我通过在有效负载中添加 JSON.stringify() 来解决它。

  login(credential) : Observable<any> {
    return this.http.post<any>( 
    this.baseUrl + '/user/authen', JSON.stringify(credential)
    )
    .pipe( 
      map( res => res ),
      catchError( this.handleError )
    );
  }

【讨论】：