显然,我完全误解了它的语义。我想到了这样的事情:
客户端从下载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。
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”
在Python中,我一直在成功地使用Flask CORS库。它使处理CORS变得非常容易和轻松。我从下面的库文档中添加了一些代码。
安装:
pip install -U flask-cors
允许所有路由上所有域的CORS的简单示例:
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/")
def helloWorld():
return "Hello, cross-origin-world!"
有关更多具体示例,请参阅文档。我使用了上面的简单示例来解决我正在构建的Ionic应用程序中的CORS问题,该应用程序必须访问单独的烧瓶服务器。
对于带有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
}
使用React和Axios,将代理链接连接到URL,并添加标头,如下所示:
https://cors-anywhere.herokuapp.com/+您的API URL
只需添加代理链接即可,但它也可能再次引发“无访问”错误。因此,最好添加一个标题,如下所示。
axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
.then(response => console.log(response:data);
}
警告:不得用于生产
这只是权宜之计。如果你在纠结为什么你不能得到回应,你可以使用这个。但这同样不是生产的最佳答案。