跨域
什么是跨域
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。
所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。但是一般前后端分离,所以域名、端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制,如果直接发送请求会被浏览器拦截。我们知道同源策略只是在浏览器中存在,不存在于服务器中。因此我们可以将需要跨域请求的地址转发给我们自己的服务器然后委托服务器去请求信息。
vue里面在vue.config.js里面配置 proxy来解决跨域问题
基本使用:
module.exports = {
devServer: {
host: 'localhost',
port: 8080, //本地服务器
proxy: {
'/api': {
target:'http://localhost:3000', //要请求的后台地址
changeOrigin:true, //是否开启跨域
pathRewrite: {'^/api' : ''} //去掉api前缀
}
}
};
//请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user
//此时浏览器f12的请求接口会显示是http://localhost:8080/api/user,但是通过代理真实请求地址是 http://localhost:3000/user
//上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,