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

2020/09/25 20:01 · javascript ·  · 0评论

我在使用ngResource调用Amazon Web Services上的REST API时遇到此错误:

XMLHttpRequest无法加载
http://server.apiurl.com:8000/s/login?login=facebook对预检请求的响应未通过访问控制检查:在所请求的资源上不存在“ 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问题。

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

  1. 关闭CORS。例如:如何关闭Chrome中的cors
  2. 使用浏览器插件
  3. 使用代理,例如nginx。如何设置的例子
  4. 完成服务器的必要设置。这更多是您已在EC2实例上加载的Web服务器的一个因素(假设这就是您所说的“ Amazon Web Service”的意思)。对于您的特定服务器,您可以参考启用CORS网站。

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

通过关闭它只是为了完成工作(好吧,如果您访问其他站点时安全性很差,并且只会使罐子里的东西走开),则可以使用代理,使您的浏览器认为所有请求都来自本地主机。确实,您有本地服务器,然后再调用远程服务器。

因此api.serverurl.com可能会变成localhost:8000 / api,而您的本地nginx或其他代理将发送到正确的目的地。


现在,由于受欢迎的需求,CORS信息增加了100%


对于不愿花钱的人……绕过CORS正是那些仅仅学习前端的人所看到的。
https://codecraft.tv/courses/angular/http/http-with-promises/

我的“ 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');

在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")]控制器。

关于CORS,有一些警告。首先,它不允许使用通配符,*但不要让我受此限制,我已经在某处阅读过它,现在找不到该文章。

如果要从其他域发出请求,则需要添加允许来源标头。

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

如果你正在影响服务器资源,如POST / PUT /补丁,如果MIME类型是比下面的不同要求application/x-www-form-urlencodedmultipart/form-datatext/plain浏览器会自动进行飞行前的OPTIONS请求来检查与服务器是否会允许它。

因此,您的API /服务器需要相应地处理这些OPTIONS请求,您需要以适当的方式进行响应,access control headers并且http响应状态代码必须为200

标头应该是这样的,根据您的需要进行调整:

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

max-age标头很重要,在我的情况下,没有它就无法使用,我想浏览器需要“访问权限”有效期的信息。

另外,例如,如果要从其他域POSTapplication/jsonmime 发送请求,则还需要添加前面提到的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在初始或飞行前请求中请求的任何标头都应在响应中给出,以使其起作用。

此链接的MDN文档中有一个很好的示例,您还应该查看此SO帖子。

JavaScript XMLHttpRequestFetch遵循同源策略。因此,使用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

如果您正在编写扩展名

您必须manifest.json为您的域添加权限。

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]

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

与此所有帖子,获取等,将正常工作。

要解决Node JS应用程序中的跨域请求问题:

npm i cors

只需将下面的行添加到 app.js

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

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

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

在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: *");
...

我们的团队偶尔会使用Vue,axios和C#WebApi看到这种情况。在您要命中的端点上添加一个路由属性可以为我们解决此问题。

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

在我的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]

对于那些正在使用Lambda Integrated Proxy和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" : "*"
           }
     }
}

我认为从Chrome禁用CORS并不是一种好方法,因为如果您将其用于离子系统,那么肯定会在Mobile Build中出现。

因此最好在后端修复。

首先,在In标头中,您需要设置-

  • header('Access-Control-Allow-Origin:*');
  • header('Header set Access-Control-Allow-Headers:“ Origin,X-Requested-With,Content-Type,Accept”');

并且如果API的行为均与GET和POST相同,则还可以在标头中设置-

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']))标头(“访问控制权限标头:


{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}”);
退出(0); }

导致此错误的一个很常见的原因可能是主机API已将请求映射到http方法(例如PUT),而API客户端正在使用其他http方法(例如POST或GET)调用API

当DNS服务器设置为8.8.8.8(谷歌的)时,我遇到了这个问题。实际上,问题出在路由器上,我的应用程序尝试通过Google与服务器连接,而不是本地(对于我的特殊情况)。我删除了8.8.8.8,这解决了问题。我知道可以通过CORS设置解决此问题,但也许有人会遇到与我相同的麻烦

在花了一些时间在线搜索之后,我偶然发现了这个线程,因此我使用AWS sdk进行上传。感谢@lsimoneau 45581857,事实证明完全相同的事情正在发生。我只是通过附加region选项将我的请求Url指向了我的存储桶上的区域,然后它就起作用了。

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

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

取消以下<filter>,并<filter-mapping>从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>

只需几个步骤即可轻松解决此问题,而无需担心任何事情。请按照以下步骤解决。

  1. 打开(https://www.npmjs.com/package/cors#enabling-cors-pre-flight
  2. 转到安装并复制命令npm install cors以通过节点终端进行安装
  3. 通过滚动转到“简单用法(启用所有CORS请求)”,然后将完整的声明复制并粘贴到您的项目中并运行它……这将肯定起作用。.复制注释代码,并将其粘贴到您的app.js或任何其他文件中项目并尝试..这将起作用。这将解锁每个跨源资源共享。.以便我们在服务之间切换

很容易错过的东西...

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

禁用Chrome安全性。右键单击->属性->目标,创建Chrome快捷方式,粘贴此“ C:\ Program Files(x86)\ Google \ Chrome \ Application \ chrome.exe” --disable-web-security --user -data-dir =“ c:/ chromedev”

本文地址:http://javascript.askforanswer.com/duiyujianqingqiudexiangyingweitongguofangwenkongzhijiancha.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!