无效的 CORS 请求答案

【问题标题】：Invalid CORS request无效的 CORS 请求
【发布时间】：2020-01-06 22:58:24
【问题描述】：

我正在angularJs 中创建一个页面，当我向我的 API 发送请求时，它会生成错误：

我的代码是：

<!DOCTYPE html>
<html ng-app="AppIndex">
<head>
    <meta charset="utf-8">
    <title>Hola mundo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="ControllerIndex.js"></script>
</head>
<body ng-controller="ControllerIn">
    {{"Hola Mundo" + nombre}}
    <button ng-click="metodos()">Enviar</button>
    <ul>
        <li ng-repeat="response in posts">
            <h2>holaaaaa</h2>
            <p>{{response.title}}</p>
            <p>{{response.body}}</p>
        </li>
    </ul>
</body>

</html>

和javascript

angular.module("AppIndex",[])
.controller("ControllerIn", function($scope, $http){
    $scope.nombre = "Juan";
    $scope.newPost = {};
    $scope.responses = [];
    $scope.metodos = function(){
        $http({
                method: 'POST',
                url: 'http://localhost:900/Servicios/forgotPassword',
                Headers: {"Access-Control-Allow-Origin": "http://127.0.0.1", "Access-Control-Allow-Methods": "POST", "Content-Type" : "application/json"},
                data: {"user" : "admin1"}
             }).then(function (response){
                console.log(response);
                $scope.posts = response;
             },function (error){
                console.log(error);
             });
    }
})

错误信息是：

发布http://localhost:900/Servicios/forgotPassword 403 {数据：“无效的 CORS 请求”，状态：403，配置：{...}，状态文本：“”，标题：ƒ，...

我正在使用AngularJS 1.7.9

【问题讨论】：

CORS 在服务器上进行管理

标签： javascript html angularjs http-post

【解决方案1】：

Cors 策略由服务器管理

您需要允许来自您服务器的特定（或所有）网址可以访问您的服务器

允许的方式是

在您的 Http 响应中添加此标头并指定您的 url 或使用星号以允许所有

Access-Control-Allow-Origin, "your url"
Access-Control-Allow-Origin, "*"

您也可以通过添加额外的标头来选择只允许某些请求方法（或所有类型）：

Access-Control-Allow-Methods, "POST"
Access-Control-Allow-Methods, "*"

浏览器首先发送一个预检请求，检查源和请求类型是否匹配，只有当它看到它像上面的标题一样被允许时，它才会进行实际调用。

PS cors 问题仅在从浏览器调用时出现，而不是从服务器调用，也不是从 postman 等开发工具调用时

【讨论】：

【解决方案2】：

Access-Control-Allow-Origin 是响应头；如果我没记错的话，这是客户端代码。您需要从服务器端发送 Access-Control-Allow-* 标头以响应客户端请求。

【讨论】：

【解决方案3】：

您只需要从服务器端启用 CORS 请求。您使用的是哪个后端？

【讨论】：

【解决方案4】：

如果您使用 express.JS 作为后端，那么您需要将您的 cors 属性作为中间件传递。

如何在 express.JS 中做到这一点

方法一

创建一个文件 cors.js。然后复制此代码并粘贴到您的 cors.js 文件中

module.exports = function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST'); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }
之后你需要在你的 server.js 文件中 require 这个 cores.js 文件并将它作为中间件传递例如：

app.use(require('./cors'));

方法二

您可以使用 npm i cors 简单地安装 cors 并在您的服务器文件中使用。

注意：这是你在 express.js 中所做的。但是，如果您使用任何其他后端技术然后类似地你可以做类似的事情这只是一个使用 express.JS 的示例

【讨论】：