AngularJS，谷歌浏览器阻止我的应用程序发出发布请求，需要帮助添加标题[重复]

Posted 2023-03-04

【中文标题】AngularJS，谷歌浏览器阻止我的应用程序发出发布请求，需要帮助添加标题[重复]

【英文标题】：AngularJS, Google Chrome preventing my app to make post requests, need help adding headers [duplicate]

【发布时间】：2021-01-20 17:06:52

【问题描述】：

我对 AngularJS、API 和一般编码还是很陌生。我创建了这个 AngularJS 应用程序，让用户可以向我创建的 API 发出 post 请求。这是一个简单的括号检查器，一切正常，除了我必须在我的 chrome 浏览器中激活 CORS 插件才能使其工作，我不能要求用户这样做。

我很确定有办法解决这个问题，但我真的不明白。我想我需要在我的 http 请求代码中添加一些标头，对吧？

这是我发出请求的 angularjs 服务：

function ApiService($http) 
    // API = '//localhost:3000/parentheses';
    API = 'https://parentheses-api.herokuapp.com/parentheses';
    this.getUser = (entry) => 
        // console.log(this.entry);
        return $http
            .post(API,  string: entry )
            .then(function (response) 
                // console.log(response.data);
                return response.data;
            , function (reason) 
                // error
            )
        // this.entry = "";
    ;
;

angular
    .module('app')
    .service('ApiService', ApiService);

我认为这是我应该添加标题的地方。但是究竟如何以及什么标题？我现在真的不明白。

这里是完整的项目，有2个文件夹，一个包含API，另一个包含上面代码所在的APP（ApiService.js）

任何帮助将不胜感激！

【问题讨论】：

如果可以通过在客户端添加标头来规避CORS，那么首先使用CORS将是徒劳的。这些标头需要添加到服务器的回复中，而不是请求中。

【参考方案1】：

如果您请求的 API 是从作为前端的不同域提供的，那么您的 API 后端将需要使用正确的 CORS 标头进行响应。看一看：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Access-Control-Allow-Origin: *

这告诉浏览器允许从任何来源请求代码来访问您的 API。

或者，使用 Access-Control-Allow-Origin: <origin> 告诉浏览器只允许指定的源访问您的 API。

【讨论】：

好的，让我在我的 API 上试试这个（不是我的前端，明白了！）如果我不成功，我会发布一个新问题，这次分享我的 API： ) 非常感谢您的帮助！