跨域及解决方式

流川962

于 2023-05-20 13:34:08 发布

阅读量35

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56769697/article/details/130780554

版权

同源策略是浏览器的安全协议，当协议、主机或端口号不匹配时会产生跨域问题。解决方法包括：后端放开限制（不安全）、使用JSONP（需后端配合）和配置代理（如在vue.config.js中设置）。代理示例包括对/course-api或/api的配置，实现目标地址的指向和路径重写。

摘要由CSDN通过智能技术生成

跨域：

同源策略：浏览器的一种安全协议；协议、主机、端口号，只要有一个对不上，就会产生同源策略，从而产生跨域问题。

解决跨域（三种）：

1、后端直接放开；不安全
2、JSONP：script标签不受同源策略影响，这个需要后端配合
3、配置代理（常用）
在vue.config.js中配置如下代码，然后重启项目

//配置代理
devServer: {
proxy: {
// 代理的名字
'/course-api': {
// 代理的地址
target: 'http://course.myhope365.com/api/',
// 是否跨域
changeOrigin: true,
// 路径重写
pathRewrite:{
"^/course-api":''
}
}
}
}

// http://course.myhope365.com/api/  需要的网址
// 不用路径重写
devServer: {
proxy: {
// 代理的名字
'/api': {
// 代理的地址
target: 'http://course.myhope365.com',
// 是否跨域
changeOrigin: true,
// 路径重写
pathRewrite:{
"^/course-api":''
}
}
}
}