Javascript 对飞行前请求的响应不'；无法通过访问控制检查

我使用ngResource在Amazon Web服务上调用REST API时遇到此错误：

无法加载XMLHttpRequest . 回应 飞行前请求未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。起源'http://localhost因此，不允许访问。 错误405

服务：

socialMarkt.factory('loginService', ['$resource', function ($resource) {
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, {
        login: "facebook",
        access_token: "@access_token",
        facebook_id: "@facebook_id"
    }, {
        getUser: {
            method: 'POST'
        }
    });
}]);

控制器：

[...]
loginService.getUser(JSON.stringify(fbObj)),
    function (data) {
        console.log(data);
    },
    function (result) {
        console.error('Error', result.status);
    }
[...]

---

我正在使用Chrome，我不知道还需要做什么才能解决这个问题。我甚至将服务器配置为接受来自origin

localhost

的头，因为您遇到了CORS问题

有几种方法可以解决这个问题

关掉CORS。例如：

使用代理，如nginx

完成服务器的必要设置。这更多地是您在EC2实例上加载的web服务器的一个因素（假定这就是您所说的“AmazonWeb服务”）。对于您的特定服务器，您可以参考

更详细地说，您正在尝试从localhost访问api.serverurl.com。这是跨域请求的确切定义

通过关闭它只是为了完成您的工作（好的，但是如果您访问其他站点并且只是顺路一踢，您的安全性会很差），您可以使用一个代理，它使您的浏览器认为所有请求都来自本地主机，而实际上您有本地服务器，然后调用远程服务器

因此，api.serverurl.com可能成为localhost:8000/api，您的本地nginx或其他代理将发送到正确的目标

---

现在，由于大众的需求，…同样的品味

---

绕过CORS正是为那些简单学习前端的人所展示的。

我的“API服务器”是一个PHP应用程序，为了解决这个问题，我找到了以下解决方案：

将行放入index.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

---

对于PythonFlask服务器，您可以使用flask cors插件来启用跨域请求

---

请参阅：

当DNS服务器设置为8.8.8.8（谷歌的）时，我遇到了这个问题。实际上，问题出在路由器上，我的应用程序试图通过google连接服务器，而不是本地连接（针对我的特殊情况）。我已经删除了8.8.8.8，这就解决了这个问题。

---

我知道CORS设置解决了这个问题，但可能有人会遇到与我相同的问题

在我的Apache VirtualHost配置文件中，我添加了以下行：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

JavaScriptXMLHttpRequest和Fetch遵循相同的源策略。所以 使用XMLHttpRequest或Fetch的web应用程序只能生成HTTP 对其自己域的请求

资料来源：

您必须从服务器端发送访问控制允许源：HTTP头

如果使用Apache作为HTTP服务器，则可以将其添加到Apache配置文件中，如下所示：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

---

在AspNetCore web api中，通过添加“Microsoft.AspNetCore.Cors”（1.1.1版）并在Startup.cs上添加以下更改，解决了此问题

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

及

---

并将

[EnableCors（“AllowlHeaders”）]

放在控制器上。

很容易错过的东西

在解决方案资源管理器中，右键单击api项目。在属性窗口中，将“匿名身份验证”设置为已启用

如果您正在编写一个chrome扩展名 您必须在

manifest.json

中添加域的权限

---

如果您是偶然使用IIS服务器。您可以在HTTP请求标头选项中设置以下标头

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

---

有了这个，所有的post、get等都可以正常工作。

对于那些使用集成代理和API网关的用户来说。您需要将lambda函数配置为直接向其提交请求，这意味着该函数应该正确设置响应头。（如果您使用自定义lambda函数，这将由API网关处理。）

---

在PHP中，您可以添加标题：

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

---

地理服务器的独立发行版包括Jetty应用服务器。启用跨源资源共享（CORS）
允许您自己域之外的JavaScript应用程序使用GeoServer

从webapps/geoserver/WEB-INF/WEB.xml中取消注释以下
和
：

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>


交叉起源
org.eclipse.jetty.servlets.CrossOriginFilter
交叉起源
/*
我认为从Chrome中禁用CORS不是一个好方法，因为如果您在ionic中使用它，当然在Mobile Build中，问题会再次出现

所以最好在后端进行修复

首先，在标题中，您需要设置-


标题（'Access-Control-Allow-Origin:'）
标题（'标题集访问控制允许标题：“来源，X请求，内容类型，接受“）

若API的行为是GET和POST，那个么也可以在头中设置它们-

if（$_服务器['REQUEST_METHOD']=='OPTIONS'）{if
（isset（$_服务器['HTTP\u访问\控制\请求\方法']））
标题（“访问控制允许方法：获取、发布、选项”）；

if（isset（$\u服务器['HTTP\u访问\u控制\u请求\u头]））
标题（“访问控制允许标题：

{$_服务器['HTTP_访问_控制_请求_头']}）；退出（0）；}

禁用chrome安全。创建chrome快捷方式
右键单击->属性->目标，粘贴此“C:\Program Files（x86）\Google\Chrome\Application\Chrome.exe”--禁用web安全--user data dir=“C:/chromedev”
我正在使用AWS sdk进行上载，在花费一些时间在线搜索后，我偶然发现了此线程。多亏了@lsimoneau，原来发生了完全相同的事情。我只是通过附加region选项将我的请求Url指向我的bucket上的区域，它就工作了

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

此错误的一个常见原因可能是主机API已将请求映射到http方法（例如PUT）和t
<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

npm i cors

let cors = require('cors')
app.use(cors())

 Access-Control-Allow-Origin: www.other.com 

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }