无效的 CORS 请求

Question

我正在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);
             });
    }
})

错误信息是：

POST http://localhost:900/Servicios/forgotPassword 403 {data: "Invalid CORS request", status: 403, config: {…}, statusText: "", headers: ƒ, ...

我正在使用AngularJS 1.7.9

Answer 1

Cors 策略由服务器管理

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

允许它的方法是

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

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

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

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

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

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

Answer 2

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

Answer 3

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

Answer 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 的示例

无效的 CORS 请求

问题描述

4 个解决方案

解决方案1
1 2020-01-07 14:15:21

解决方案2
0 2020-01-06 23:05:21

解决方案3
0 2020-01-07 04:58:35

解决方案4
0 2020-01-07 05:24:21

无效的 CORS 请求

问题描述

4 个解决方案

解决方案1 1 2020-01-07 14:15:21

解决方案2 0 2020-01-06 23:05:21

解决方案3 0 2020-01-07 04:58:35

解决方案4 0 2020-01-07 05:24:21

解决方案1
1 2020-01-07 14:15:21

解决方案2
0 2020-01-06 23:05:21

解决方案3
0 2020-01-07 04:58:35

解决方案4
0 2020-01-07 05:24:21