目的:跨域是浏览器为了安全而做出的限制策略,浏览器请求必须遵从同源原则:同域名、同端口、同协议
解决方法:
- CORS跨域:
后端操作,setHeader() Access-Control-allow-Origin:允许跨域的地址
Access-Control-allow-Credentials:传cookie
- JSONP跨域:前端+后端操作,安装jsonp插件(npm i jsonp --save )
jsonp(url,配置,回调函数)
- 代理跨域(nginx):创建vue.config.js文件
moudule.exports = {
devServer: {
open: true, //自动打开浏览器
https: false, //https协议
host: 'localhost',
port: 8080,
hot: true, // hot配置是否启用模块的热替换功能,devServer的默认行为是在发现源代码被变更后,通过自动刷新整个页面来做到事实预览,开启hot后,将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
hotOnly: false, // hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败
proxy: {
‘/api’: {
target: 'url',
changeOrigin: false,
ws: true,
pathReWrite: {
'^api': ''
}
}
}
}
}