背景介绍:
开发微信公共号时前后端分离,后台用C#开发,前端使用vue框架,数据采用axios传输
具体问题:
1:前后端分离造成的跨域访问
2:跨域后cookie传输和设置
解决方案:
1:使用jsonp作为数据传输的方式,前端和后端配合解决跨域问题
2:通过axios与webconfig中的设置将cookie通过axios传输(get、set)
具体方案:
问题一:
1:controller
复制代码 /// <summary> /// get /// </summary> /// <param name="ID"></param> /// <returns></returns> public JsonpResult Text(int ID) { return this.Jsonp(ID); } /// <summary> /// post /// </summary> /// <param name="jsonp"></param> /// <returns></returns> [HttpPost] public JsonpResult TextJsonpHttp(string jsonp) { return this.Jsonp(jsonp); } 复制代码 2:JsonpResult
View Code 3:vue中axios.js
get post get与post均可使用axios.js
4:配置项web.config
web.config 问题二:
1:web.config中配置项
2:vue-main.js中
axios.defaults.withCredentials = true//解决cookie问题
3:axios请求
4:http header
得到结论,在跨域的情况下使用 axios,首先需要配置 axios 的 withCredentials 属性为 true。然后服务器还需要配置响应报文头部的 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 两个字段,Access-Control-Allow-Origin 字段的值需要为确定的域名,而不能直接用 ‘*’ 代替,Access-Control-Allow-Credentials 的值需要设置为 true。前端和服务端两边都配置完善之后就可以正常进行跨域访问以及携带 cookie 信息了。
|