Question

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

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

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（起源：“”，标题：“”，方法：“*”）]

它有效。我甚至不需要在我的标题中添加任何东西用于我的ajax。虽然这不是真正的灵魂，因为我不希望这在生产中发生，我猜？

还有一个我可以设置角色的全局功能吗？有点想把它放在每个控制器上。

编辑2

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

Answer 1

试试这个：

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

Answer 2

您可以使用以下方式全局启用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

的更多信息

如何启用CORS？断绝？ JavaScript的？哪里？

2 个答案: