如何启用 CORS？断绝？ Javascript？在哪里？

Question

现在我正在 locahost:3333 上测试我的 reactjs 站点，在 localhost:54690 上测试我的 asp.net web api 2。

我正在为我的 ajax 使用 axios，但是当我提出请求时，我得到了一个错误。

XMLHttpRequest 无法加载 http://localhost:54690/api/Storage/Get。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3333” 使用权。响应的 HTTP 状态代码为 500。

我尝试添加 Cors，但我想我做得不对。我试过服务器端和客户端。

   var instance = axios.create({
            baseURL: 'http://localhost:54690/api',
            timeout: 1000,
            headers: { 'Access-Control-Allow-Origin': '*' }
        });

        instance.get('/Storage/Get')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

服务器端

[EnableCors(origins: "http://localhost:3333/", headers: "*", methods: "*")]
public class StorageController : ApiController

WebapiConfig.

  public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Filters.Add(new EnableQueryAttribute());

            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.EnableCors();
        }
    }

编辑

好像我这样做的时候

[EnableCors(origins: "", headers: "", methods: "*")]

它有效。我什至不需要在我的 ajax 标题中添加任何内容。虽然这不是一个真正的灵魂，因为我不希望这发生在我猜的生产中？

还有我可以设置 cors 的全局函数吗？把它放在每个控制器上有点糟糕。

编辑 2

更多地查看来自@kormali_2 的链接，我发现问题可能是因为我有“http://locahost:3333/”，它应该是“http://locahost:3333”，还有一个全局选项我可以使用。

Answer 1

您可以通过以下方式全局启用 CORS：

// Enable CORS globally for any host
var corsAttr = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(corsAttr);

仅针对您将使用的特定主机启用它：

// Enable CORS globally for specific host
var corsAttr = new EnableCorsAttribute("http://localhost:3333", "*", "*");
config.EnableCors(corsAttr);

更多信息http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

Answer 2

试试这个：

    var instance = axios.create({
        baseURL: 'http://localhost:54690/api',
        timeout: 1000,
        headers: { 
         'Accept': 'application/json',
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': '*'
        }
    });