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

客户端从下载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。


当前回答

根据我自己的经验,很难找到一个简单的解释,为什么CORS甚至是一个问题。

一旦你明白了为什么会出现,标题和讨论就会变得更加清晰。我会在几行字里尝试一下。


都是关于饼干的。Cookie按其域存储在客户端上。

一个例子:在你的电脑上,有一个你的bank.com的cookie。也许你的会话就在那里。

要点:当客户端向服务器发出请求时,它将发送存储在该请求的域下的cookie。

您已在浏览器上登录到yourbank.com。您请求查看您的所有帐户,并为yourbank.com发送cookie。yourbank.com收到一堆cookie,并发回其响应(您的帐户)。

如果另一个客户机向服务器发出跨源请求,则会像以前一样发送这些cookie。如罗。

你浏览到malicious.com。malicious向不同的银行发出一系列请求,包括yourbank.com。

由于cookie按预期进行了验证,服务器将授权响应。

这些饼干被收集起来并一起发送——现在,malious.com收到了您银行的回复。

诶呀


现在,一些问题和答案变得显而易见:

“我们为什么不阻止浏览器这样做?”是的。这是CORS。“我们怎么解决?”让服务器告诉请求CORS正常。

其他回答

根据我自己的经验,很难找到一个简单的解释,为什么CORS甚至是一个问题。

一旦你明白了为什么会出现,标题和讨论就会变得更加清晰。我会在几行字里尝试一下。


都是关于饼干的。Cookie按其域存储在客户端上。

一个例子:在你的电脑上,有一个你的bank.com的cookie。也许你的会话就在那里。

要点:当客户端向服务器发出请求时,它将发送存储在该请求的域下的cookie。

您已在浏览器上登录到yourbank.com。您请求查看您的所有帐户,并为yourbank.com发送cookie。yourbank.com收到一堆cookie,并发回其响应(您的帐户)。

如果另一个客户机向服务器发出跨源请求,则会像以前一样发送这些cookie。如罗。

你浏览到malicious.com。malicious向不同的银行发出一系列请求,包括yourbank.com。

由于cookie按预期进行了验证,服务器将授权响应。

这些饼干被收集起来并一起发送——现在,malious.com收到了您银行的回复。

诶呀


现在,一些问题和答案变得显而易见:

“我们为什么不阻止浏览器这样做?”是的。这是CORS。“我们怎么解决?”让服务器告诉请求CORS正常。

对于跨源共享,请设置标题:“Access Control Allow origin”:“*”;

Php:header(“访问控制-允许原始”:“*”);

节点:app.use('Access-Control-Allow-Origin':'*');

这将允许共享不同域的内容。

我无法在后端服务器上配置它,但通过浏览器中的这些扩展,它对我很有用:

对于Firefox:

CORS无处不在

对于Google Chrome:

允许CORS:访问控制允许源

注意: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
 }

在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问题,该应用程序必须访问单独的烧瓶服务器。