其他分享
首页 > 其他分享> > Vue+netFramwork4.8处理跨域请求

Vue+netFramwork4.8处理跨域请求

作者:互联网

 

最近在搭一个vue+framwork4.8的项目,记录一下:

 

问题1:
报错:Access to XMLHttpRequest at 'https://localhost:44391/api/Hold/GetLotInfoList' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因:

在跨域访问web api的api时,C#自带的web api并不能支持跨域访问,如果需要,可以更改配置来实现

解决办法:

(1)允许所有来源,HTTP方法,请求标头跨域:
  后端,在Web.config中找到<system.webServer>标签,里面添加配置如下:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
    <add name="Access-Control-Allow-Headers" value="*" />
    <!--<add name="Access-Control-Allow-Headers" value="Content-Type,Token" />-->
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

项目截图

 

 

 

(2)指定对应来源,HTTP方法和请求标头跨域:

  详情参考微软官方文档:链接

 

问题2:

修改上述问题后,某些请求还是会报错:method not allow

原因:

带有[FormQuery](4.8中称为[FormUri])参数或无参的请求调用正常,带有[FormBody]即json参数的请求会报上述错误。

这里是与预检(options)请求的问题,需要在后端加上预检请求过滤——只要是预检请求,都返回success,再正常接收后续请求

 解决办法:

后端,在Global.asax文件添加配置如下:

/// <summary>
        /// 跨域设置(响应预检Options请求)
        /// </summary>
        protected void Application_BeginRequest()
        {
            //OPTIONS请求方法的主要作用(预请求,判断是否能够请求成功):
            //用来检查服务器的性能。如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。
            if (Request.Headers.AllKeys.Contains("origin") && Request.HttpMethod == "OPTIONS")
            {
                //表示对输出的内容进行缓冲,执行page.Response.Flush()时,会等所有内容缓冲完毕,将内容发送到客户端。
                //这样就不会出错,造成页面卡死状态,让用户无限制的等下去
                //Response.StatusCode = 204;
                Response.Flush();
            }
        }

项目截图

 

 

参考:个人认为全网最全的一版!!

No 'Access-Control-Allow-Origin' header is present on the requested resource——Web Api跨域问题

No 'Access-Control-Allow-Origin' header is present on the requested resource——Web Api跨域问题

标签:netFramwork4.8,Vue,跨域,预检,Access,api,Response,请求
来源: https://www.cnblogs.com/Yan3399/p/16443497.html