显然,我完全误解了它的语义。我想到了这样的事情:

客户端从下载JavaScript代码MyCode.jshttp://siteA-原产地。MyCode.js的响应标头包含Access Control Allow Origin:http://siteB,我认为这意味着允许MyCode.js对站点B进行跨源引用。客户端触发MyCode.js的一些功能,进而向http://siteB,这应该可以,尽管是跨源请求。

嗯,我错了。它根本不是这样工作的。所以,我已经阅读了跨源资源共享,并尝试阅读w3c推荐中的跨源资源分享。

有一点是肯定的——我仍然不明白我应该如何使用这个标题。

我完全控制站点A和站点B。如何使从站点A下载的JavaScript代码使用此标头访问站点B上的资源?

备注:我不想使用JSONP。


当前回答

我使用Express.js 4、Node.js 7.4和Angular,但遇到了同样的问题。这帮助了我:

a) 服务器端:在app.js文件中,我向所有响应添加头,比如:

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

这必须在所有路线之前。

我看到很多人添加了这个标题:

res.header("Access-Control-Allow-Headers","*");
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

但我不需要,

b) 客户端:通过Ajax发送时,需要添加“withCredentials:true”,如:

$http({
     method: 'POST',
     url: 'url',
     withCredentials: true,
     data : {}
   }).then(function(response){
       // Code
   }, function (response) {
       // Code
});

其他回答

Nginx和Apache

作为apsiller答案的补充,我想添加一个wiki图表,显示请求是否简单(OPTIONS航班前请求是否发送)

对于一个简单的请求(例如,热链接图像),您不需要更改服务器配置文件,但您可以像Melvin Guerrero在回答中提到的那样在应用程序(托管在服务器上,例如,在PHP中)中添加头标,但请记住:如果您在服务器(配置)中添加完整的CORS头标,同时在应用程序中允许简单的CORS(例如,PHP),这根本行不通。

下面是两种常用服务器的配置:

打开Nginx上的CORS(Nginx.conf文件)位置~^/index\.php(/|$){...add_header'访问控制允许来源'“$http_Origin”始终;#如果您将“$http_origin”更改为“*”,您将得到相同的结果-允许所有域使用CORS(但最好将其更改为您的特定域)add_header“访问控制允许凭据”“始终为true”;if($request_method=OPTIONS){add_header'访问控制允许来源'“$http_Origin”;#请勿移除该行(用上面的外部“if”加倍)add_header'访问控制允许凭据''true';add_header'访问控制最大年龄'1728000;#缓存20天的飞行前值add_header'访问控制允许方法''GET,POST,OPTIONS';#任意方法add_header'访问控制允许标头''我的第一个标头,我的第二个标头,授权,内容类型,接受,来源';#任意标头add_header“内容长度”0;add_header“内容类型”“text/plain charset=UTF-8”;返回204;}}在Apache上打开CORS(.htaccess文件)# ------------------------------------------------------------------------------#|跨域Ajax请求|# ------------------------------------------------------------------------------#启用跨源Ajax请求。# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity# http://enable-cors.org/#将下面的*(允许任何域)更改为您的域标题集访问控制允许来源“*”标头始终设置访问控制允许方法“POST、GET、OPTIONS、DELETE、PUT”标头始终设置访问控制允许标头“My First Header,My Second Header,Authorization,content type,csrf token”标头始终将访问控制允许凭据设置为“true”

对于带有Angular的.NET Core 3.1 API

Startup.cs:添加CORS

    //SERVICES
    public void ConfigureServices(IServiceCollection services){

        //CORS (Cross Origin Resource Sharing)
        //=====================================
        services.AddCors();
    }

    //MIDDLEWARES
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseRouting();

        //ORDER: CORS -> Authentication -> Authorization)
        //CORS (Cross Origin Resource Sharing)
        //=====================================  
        app.UseCors(x=>x.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200"));

        app.UseHttpsRedirection();
    }
}

控制器:为授权控制器启用CORS

 //Authorize all methods inside this controller
 [Authorize]
 [EnableCors()]
 public class UsersController : ControllerBase
 {
    //ActionMethods
 }

访问控制允许源是CORS(跨源资源共享)标头。

当站点A尝试从站点B获取内容时,站点B可以发送一个访问控制允许源站响应标头,告诉浏览器此页面的内容可由特定源站访问。(源站是一个域,加上一个方案和端口号。)默认情况下,站点B的页面不可由任何其他源站访问;使用Access Control Allow Origin(访问控制允许来源)标头为特定请求来源的跨来源访问打开了一扇门。

对于站点B希望站点A访问的每个资源/页面,站点B应为其页面提供响应标题:

Access-Control-Allow-Origin: http://siteA.com

现代浏览器不会完全阻止跨域请求。如果站点A从站点B请求页面,浏览器将在网络级别实际获取请求的页面,并检查响应标头是否将站点A列为允许的请求者域。如果站点B未指示站点A被允许访问此页面,浏览器将触发XMLHttpRequest的错误事件,并拒绝向请求的JavaScript代码提供响应数据。

非简单请求

在网络层面发生的事情可能比上面解释的稍微复杂一些。如果请求是“非简单”请求,则浏览器首先发送一个无数据的“预检”OPTIONS请求,以验证服务器是否接受该请求。在以下情况之一(或两者)时,请求是非简单的:

使用GET或POST以外的HTTP动词(例如PUT、DELETE)使用非简单请求头;唯一简单的请求头是:接受接受语言内容语言内容类型(仅当其值为application/x-wwww-form-urlencoded、multipart/form-data或text/plain时才简单)

如果服务器使用与非简单谓词和/或非简单标头匹配的适当响应标头(非简单标头的访问控制允许标头,非简单谓词的访问控制方法)响应OPTIONS预检,则浏览器发送实际请求。

假设站点A想要发送一个对/somePage的PUT请求,其中一个非简单的Content-Type值为application/json,浏览器将首先发送一个预检请求:

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

注意,访问控制请求方法和访问控制请求头由浏览器自动添加;您不需要添加它们。此OPTIONS预检获得成功的响应标头:

Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

在发送实际请求时(飞行前完成后),行为与处理简单请求的方式相同。换言之,预飞成功的非简单请求被视为简单请求(即,服务器仍然必须再次发送访问控制允许源以获得实际响应)。

浏览器发送实际请求:

PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json

{ "myRequestContent": "JSON is so great" }

服务器会发回一个“访问控制允许源”,就像对一个简单的请求一样:

Access-Control-Allow-Origin: http://siteA.com

有关非简单请求的更多信息,请参阅了解CORS上的XMLHttpRequest。

Access Control Allow Origin响应标头指示响应可以与来自给定源的请求代码共享。标头类型响应标头-------------------------------------------禁止的标题名称编号告诉浏览器允许任何来源的代码访问资源将包括以下内容:访问控制允许来源:*

有关详细信息,请访问访问控制允许来源。。。

根据Mozilla开发者网络的这篇文章,

当资源从不同于第一个资源本身服务的域或端口请求资源时,它会发出跨源HTTP请求。

来自的HTML页面http://domain-a.com对发出<img>src请求http://domain-b.com/image.jpg.今天,网络上的许多页面从不同的域加载CSS样式表、图像和脚本等资源(因此应该很酷)。

同源政策

出于安全原因,浏览器限制从脚本中发起的跨源HTTP请求。例如,XMLHttpRequest和Fetch遵循相同的源策略。因此,使用XMLHttpRequest或Fetch的web应用程序只能向自己的域发出HTTP请求。

跨源资源共享(CORS)

为了改进web应用程序,开发人员要求浏览器供应商允许跨域请求。

跨源资源共享(CORS)机制为web服务器提供跨域访问控制,从而实现安全的跨域数据传输。现代浏览器在API容器(如XMLHttpRequest或fetch)中使用CORS来降低跨源HTTP请求的风险。

CORS的工作原理(Access Control Allow Origin标头)

维基百科:

CORS标准描述了新的HTTP头,它为浏览器和服务器提供了一种只有在他们有权限时才请求远程URL的方式。

虽然服务器可以执行一些验证和授权,但浏览器通常有责任支持这些标头并遵守它们施加的限制。

实例

浏览器发送OPTIONS请求和Origin HTTP头。

此标头的值是为父页提供服务的域。当页面来自http://www.example.com尝试访问service.example.com中的用户数据时,将向service.example.com:

Origin: http://www.example.com

service.example.com上的服务器可能会响应:

其响应中的访问控制允许源站(ACAO)标头指示允许哪些源站。例如:访问控制允许来源:http://www.example.com如果服务器不允许跨源请求,则显示错误页面带有通配符的访问控制允许来源(ACAO)标头,允许所有域:访问控制允许来源:*