Vue+netFramwork4.8处理跨域请求

2022-07-04 17:02:35 阅读：154 来源： 互联网

标签：netFramwork4.8 Vue 跨域预检 Access api Response 请求

最近在搭一个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跨域问题

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue+netFramwork4.8处理跨域请求

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