我使用ngResource在亚马逊Web服务上调用REST API得到这个错误:

XMLHttpRequest无法加载 http://server.apiurl.com: 8000 / s /登录吗? =登录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浏览器。为了解决这个问题,我还能做些什么?

我甚至将服务器配置为接受来自源localhost的头文件。


当前回答

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

看:Flask-CORS

其他回答

对于任何使用API网关的HTTP API和代理路由ANY /{proxy+}的人

为了使CORS工作,您需要显式地定义路由方法。

我希望在AWS文档中更明确地为HTTP API配置CORS

我和AWS支持人员打了两个小时的电话,他们把他们的一个高级HTTP API开发人员圈了进来,他提出了这个建议。

跨源资源共享(Cross-Origin Resource Sharing, CORS)是一种基于http头的机制,它允许服务器指明浏览器应该允许加载资源的任何源(域、方案或端口),而不是它自己的源

来自跨原产地资源共享(CORS)

简而言之,网络服务器会告诉你(你的浏览器)你应该信任哪些网站。

Scammysite。Bad尝试告诉浏览器向good-api-site.good发送请求 good-api-site。Good告诉浏览器它应该只信任other-good-site.good 你的浏览器说你真的不应该相信诈骗网站。Bad对good-api-site的请求。很好,CORS救了你。

如果你正在创建一个网站,你真的不关心谁与你集成。犁。在ACL中设置*。

但是,如果您正在创建一个站点,并且只允许站点X,甚至站点X、Y和Z,则使用CORS指示客户端浏览器只信任这些站点与您的站点集成。

浏览器当然可以选择忽略这一点。再次强调,CORS保护的是你的客户,而不是你。

CORS允许定义*或一个站点。这可能会限制你,但你可以通过在你的web服务器上添加一些动态配置来解决这个问题——并帮助你变得具体。

这是一个关于如何在Apache中为每个站点配置CORS的示例:

# Save the entire "Origin" header in Apache environment variable "AccessControlAllowOrigin"
# Expand the regex to match your desired "good" sites / sites you trust
SetEnvIfNoCase Origin "^https://(other-good-site\.good|one-more-good.site)$" AccessControlAllowOrigin=$0
# Assuming you server multiple sites, ensure you apply only to this specific site
<If "%{HTTP_HOST} == 'good-api-site.com'">
    # Remove headers to ensure that they are explicitly set
    Header        unset Access-Control-Allow-Origin   env=AccessControlAllowOrigin
    Header        unset Access-Control-Allow-Methods  env=AccessControlAllowOrigin
    Header        unset Access-Control-Allow-Headers  env=AccessControlAllowOrigin
    Header        unset Access-Control-Expose-Headers env=AccessControlAllowOrigin
    # Add headers "always" to ensure that they are explicitly set
    # The value of the "Access-Control-Allow-Origin" header will be the contents saved in the "AccessControlAllowOrigin" environment variable
    Header always set Access-Control-Allow-Origin   %{AccessControlAllowOrigin}e     env=AccessControlAllowOrigin
    # Adapt the below to your use case
    Header always set Access-Control-Allow-Methods  "POST, GET, OPTIONS, PUT"        env=AccessControlAllowOrigin
    Header always set Access-Control-Allow-Headers  "X-Requested-With,Authorization" env=AccessControlAllowOrigin
    Header always set Access-Control-Expose-Headers "X-Requested-With,Authorization" env=AccessControlAllowOrigin
</If>

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>

对于那些使用带有API网关的Lambda集成代理的人,您需要配置您的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不是一个好方法,因为如果你在Ionic中使用它,在移动版本中肯定会再次出现这个问题。

所以最好修改后端。

首先,在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 (收取($ _SERVER [' HTTP_ACCESS_CONTROL_REQUEST_METHOD '])) header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 如果收取($ _SERVER [' HTTP_ACCESS_CONTROL_REQUEST_HEADERS '])) 标题(“Access-Control-Allow-Headers: {$ _SERVER [' HTTP_ACCESS_CONTROL_REQUEST_HEADERS ']}”);退出(0);}