关于跨域
跨域是什么?
跨域指的是在浏览器中,当前页面的域名、协议、端口三者之间有一个不同,就会出现跨域问题。比如在一个页面中,从一个域名的网页去访问另一个域名的接口,就属于跨域访问。跨域访问的限制是浏览器安全策略的一部分,目的是为了保护用户信息的安全,防止恶意网站盗取用户数据。
如何解决跨域(原理)
在Vue中代理配置可以通过在vue.config.js文件中添加devServer选项来实现。
- 1.创建vue.config.js文件,如果项目中没有该文件,则需要手动创建。
- 2.在vue.config.js文件中添加如下代码,实现代理配置:
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:5000', // 接口域名 changeOrigin: true, // 是否跨域 pathRewrite: { '^/api': '' // 需要rewrite的,如/api/aaa/实际访问应为/api/aaa/ } } } } }
上述代码中,"/api"是代理的接口路径,"target"是目标服务器地址,"changeOrigin"表示是否跨域,"pathRewrite"用于重定向路径。
例如,下面的请求会被代理:
axios.get('/api/user')
实际发往的地址是:http://localhost:5000/user
注意:修改配置后,需要重新启动服务器才能生效