首页 文章

对预检请求的响应未通过访问控制检查

提问于
浏览 次
276

我使用ngResource在Amazon Web Services上调用REST API时收到此错误：

XMLHttpRequest无法加载http://server.apiurl.com:8000/s/login?login=facebook . 对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头 . 因此不允许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);
                }
[...]

我'm using Chrome, and I dont know what else to do in order to fix this problem. I'甚至将服务器配置为接受来自原始 localhost 的标头 .

javascript ajax http cors http-status-code-405

19 回答

  • 1

    我的“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');
    回复于
  • 3

    在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();
                });
    });
    .
    .
    .
}

    和

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

    并将 [EnableCors("AllowAllHeaders")] 放在控制器上 .

    回复于
  • 120

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

    见：https://flask-cors.readthedocs.io/en/latest/

    回复于
  • 1

    我使用AWS sdk进行上传，花了一些时间在网上搜索后我偶然发现了这个帖子 . 感谢@lsimoneau 45581857，结果发生了同样的事情 . 我只是通过附加region属性将我的请求Url指向我的存储区域，并且它工作正常 .

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

    问题是由于跨源请求而发生的

    亲爱的，我可以

    只需将以下行添加到nodejs项目的app.js即可

    让cors = require（'cors'）app.use（cors（））

    回复于
  • 7

    导致此错误的一个常见原因可能是主机API已将请求映射到http方法（例如PUT），并且API客户端使用不同的http方法（例如POST或GET）调用API

    回复于
  • 1

    当DNS服务器设置为8.8.8.8（谷歌）时，我遇到了这个问题 . 实际上，问题出在路由器上，我的应用程序试图通过谷歌连接服务器，而不是本地（对于我的特定情况） . 我已经删除了8.8.8.8，这解决了这个问题 . 我知道CORS设置解决了这个问题，但也许有人会遇到和我一样的问题

    回复于
  • 4

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

    从webapps / geoserver / WEB-INF / web.xml取消注释以下 <filter> 和 <filter-mapping> ：

    <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>
    回复于
  • 0

    您正在遇到CORS问题 .

    有几种方法可以解决此问题 .

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

    通过关闭它只是为了让你的工作完成（好吧，如果你访问其他网站并给你带来不好的安全性，你可以使用代理，这会让你的浏览器认为所有请求都来自本地主机）你真的有本地服务器然后调用远程服务器 .

    所以api.serverurl.com可能会成为localhost：8000 / api，您的本地nginx或其他代理将发送到正确的目的地 .

    现在受欢迎的需求，100% more CORS info ....同样很棒的味道！

    而对于downvoters来说......绕过CORS正是那些只是学习前端的人所展示的 . https://codecraft.tv/courses/angular/http/http-with-promises/

    回复于
  • 0

    关于CORS，有一些注意事项 . 首先，它不允许使用通配符 * 但是在某处读取它并且我现在找不到该文章 .

    如果您要从其他域发出请求，则需要添加allow origin标头 . Access-Control-Allow-Origin: www.other.com

    如果您正在发出影响POST / PUT / PATCH等服务器资源的请求，并且如果mime类型与以下 application/x-www-form-urlencoded ， multipart/form-data 或 text/plain 不同，则浏览器将自动发出飞行前OPTIONS请求以检查服务器是否存在会允许的 .

    因此，您的API /服务器需要相应地处理这些OPTIONS请求，您需要使用相应的 access control headers 进行响应，并且http响应状态代码需要为 200 .

    Headers 应该是这样的，根据您的需要调整它们： Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type Access-Control-Max-Age: 86400 max-age Headers 很重要，在我的情况下，如果没有它，它将无法工作，我猜浏览器需要"access rights"有效的信息 .

    另外，如果你正在制作例如a POST 请求来自不同域的 application/json mime，您还需要添加前面提到的allow origin标头，所以它看起来像这样：

    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 标头，都应在响应中给出，以使其起作用 .

    在this link上的MDN文档中有一个很好的例子，你也应该查看this SO post

    回复于
  • 2

    JavaScript XMLHttpRequest和获取遵循同源策略 . 因此，使用XMLHttpRequest或Fetch的Web应用程序只能向其自己的域发出HTTP请求 .

    资料来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

    您必须从服务器端发送 **Access-Control-Allow-Origin: *** HTTP标头 .

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

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

    默认情况下，在Apache中启用Mod_headers，但是，您可能希望通过运行以下命令来确保它已启用：

    a2enmod headers
    回复于
  • 2

    如果你正在写一个chrome扩展名

    您必须在 manifest.json 中添加域名的权限 .

    "permissions": [
   "http://example.com/*",
   "https://example.com/*"
]
    回复于
  • 1

    我认为 disabling CORS from Chrome is not good way ，因为如果你在离子中使用它，当然在移动构建中，问题将再次提升 .

    最好在你的后端修复 .

    首先在 Headers 中，您需要设置 -

    • Headers （'Access-Control-Allow-Origin: *'）;

    • Headers （'Header set Access-Control-Allow-Headers: 305421 '）;

    如果API表现为GET和POST两者，那么也在你的 Headers 中设置 -

    if（$ _SERVER ['REQUEST_METHOD'] =='OPTIONS'）{if（isset（$ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_METHOD']））header（“Access-Control-Allow-Methods：GET，POST，OPTIONS”）; if（isset（$ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']））header（“Access-Control-Allow-Headers：{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}”）;出口（0）; }

    回复于
  • 14

    禁用chrome安全性 . 创建一个chrome快捷键右键单击 - > properties - > target，粘贴“C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe”--disable-web-security --user -data-DIR = “C：/ chromedev”

    回复于
  • 0

    对于那些使用 Lambda Integrated Proxy with API Gateway . 您需要配置lambda函数，就像直接向其提交请求一样，这意味着函数应该正确设置响应头 . （如果您使用自定义lambda函数，这将由API网关处理 . ）

    //In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}
    回复于
  • 4

    很容易错过的东西......

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

    回复于
  • 159

    如果您偶然使用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';

    有了这个所有的帖子，得到等，将工作正常 .

    回复于
  • 1

    在我的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]
    回复于
  • -5

    在PHP中，您可以添加 Headers ：

    <?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: *");
...
    回复于

相关问题