一,为什么产生跨域
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
二,解决跨域得到方法
1.CORS方式
2.proxy
在vue中配置代理proxy解决跨域
1.target中有api 用 pathRewrite 去重写路径
module.exports ={
devServer:{
proxy:{
'/api':{ // /api表示拦截/api开头的请求路径
// target:'https://www.vue-js.com/api/v1/topics',
target:'https://www.vue-js.com/api', // 跨域的域名(不需要写路径)
changerOrigin:true, // 是否开启跨域
pathRewrite:{ // 重写路径 ,这里的重写路径不是重写上面target的路径,
// 、是重写页面中请求的,例如AboutView中的 ‘api/v1/topics' 把这里面的pai变为空
'^/api':"" // 把/api变为空字符串
}
}
}
}
}
2.target中有没有api 不用 pathRewrite 去重写路径
下面展示一些 内联代码片
。
module.exports = {
devServer: {
// host: "0.0.0.0", // 如果想要被外部访问,则需设置为 "0.0.0.0"
port: 8080, //指定一个端口号,并监听来自这个端口的请求;
// https: true, // false 表示使用 HTTP
open: true, // true 表示启动应用之后自动打开默认浏览器。
proxy: {
'/api': {
target: "https://www.vue-js.com",
changerOrigin: true,
}
},
// outputDir: 'dist', // 输出文件目录 npm run build
}
}