前端如何利用代理服务器解决跨域

39 阅读1分钟

首先,发生跨域,必须满足以下情况:
1.在浏览器中,发送Ajax请求。
2.触发了同源策略
而解决跨域问题,通常会有三种解决方法,都是打破了出发跨域的规则
1.jsonp发送请求,这种方法发送的并不是ajax
2.cors后端处理请求头,会使服务认为此次请求不会触发同源策略,
3.就是代理服务器。
代理服务器,原理就是,找一个第三方中间商,我们向一个域名端口号一致的本地服务器发送请求,再由服务器向我们所需要请求数据的服务器发送请求,再由此服务接受传回的数据,发送给我们。
设置代理服务器流程:
1.在环境变量中配置项目开发的基地址(配置环境变量参考之前文章),此地址为本地服务器的地址:一般为'http://localhost:8081',此时我们要保证本地服务器的端口号也是8081,如果不是8081可以通过在vue.config.js文件中修改devServer中的port
2. 如果当前的端口号被占用了 会在当前端口号的基础上+1,为了避免产生端口号不一致的问题 基地址只写成 '/api' 也是非常棒的。 3. 配置代理服务器,在vue.config.js文件的devServer中配置proxy,此属性是一个对象,'/api'就是我们发送请求中要匹配的字段,如果匹配到,会将本次请求进行代理,代理的地址是target(要请求数据的地址),changeOrigin字段也很重要,它表示是否开启跨域
// 代理服务器
proxy: { '/api': { target: 'http://xxx-xxx.net/likede/', changeOrigin: true } }