1.解决Ajax请求跨域的两种方式
服务器之间传输数据不受同源策略的限制,Ajax是前端技术。
(1)解决跨域问题的两种方式 jsonp cors
jsonp:利用<script>的src属性引用外部资源不受同源策略(协议,主机号,端口号三者相同)的限制,但是只能解决get请求跨域的问题。
前后端配合。(使用极少)
cors:后端设置响应头(使用多)
2.配置代理
(1)方式一:在vue.config.js文件中
module.exports = {
devServer: {
proxy: 'http://localhost:XXXX'
//XXXX为被请求的服务器端口号
}
}
缺陷:只能配置一个代理,而且如果本服务器已有资源就不能向另一服务器发起请求。
如示例中public中已存在students文件,如果在向服务器请求students就只能得到本服务器中的students。
(2)方式二:开启多个代理服务器(项目中常用)
module.exports = {
devServer: {
proxy: {
//请求前缀,可自定义
'/api': {
//url地址,被请求服务器的地址
target: '<url>',
//是否支持websocket
ws: true,
//用空代替请求前缀,防止发起请求时路径不匹配,相当于把请求路径中的请求前缀删了
pathRewrite:{'^/api',''},
//是否‘说谎’,即是不是请求来自代理服务器,true:隐瞒,一般设置为true,默认为true;
//控制请求头中的host(端口号)值;如果为true,则和被请求服务器的端口号相同,反之则请求服务器的host(端口号)值相同
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
发起axios请求,在地址中端口号的后面加上请求前缀,如下所述:
真实接口中没有前缀
//发起axios请求
axios.get('http://localhost:8080/请求前缀/students').then(reponse=>{},(error=>{}))
//不加请求前缀则请求本服务器中的资源
(3)实际案例:
请求前缀紧跟端口号