跨域就是本地在浏览器开发的时候遇到的同源策略问题,app、小程序那些是没有跨域的,只是本地浏览器中开发会遇到此类问题,上线后资源处于同一服务器不会发生跨域,上线前要把处理跨域的代码注释还原以免报错
直接记录解决方式:
1.第一种与vue设置跨域一样
在根目录下创建一个vue.config.js:
module.exports = {
devServer: {
proxy: { //配置跨域
'/api': { // '/api'是用来匹配地址的
target: 'https://www.xxx.com', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: { //重写路径,就是将上面的/api替换为''
'^/api': '',
/*
例子:假如我们请求的完整路径是https://www.xxx.com/public/shoplist
那么按现在这种写法,在请求方法应该写成:get("/api/public/shoplist")
在浏览器查看请求Request URL会显示:http://localhost:8080/api/public/shoplis
因为重写了 '^/api': '' ,http://localhost:8080又指向了https://www.xxx.com,所以实际的请求是:https://www.xxx.com/public/shoplist
*/
}
},
}
},
}
在请求方法应该写成:
axios.get("/api/public/shoplist")
当配置了全局根路径时:
const http = axios.create({
baseURL: ’https://www.xxx.com‘
})
将根路径改为:
const http = axios.create({
baseURL: '/api'
})
觉得用’/api’代替有点乱,直接按下面的写:
module.exports = {
devServer: {
proxy: { //配置跨域
'/': { // '/api'是用来匹配地址的
target: 'https://www.xxx.com', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: { //重写路径,就是将上面的/替换为''
'^/': '',
/*
例子:假如我们请求的完整路径是https://www.xxx.com/public/shoplist
那么按现在这种写法,在请求方法应该写成:get("/public/shoplist")
在浏览器查看请求Request URL会显示:http://localhost:8080/public/shoplis
因为重写了 '^/': '' ,http://localhost:8080又指向了https://www.xxx.com,所以实际的请求是:https://www.xxx.com/public/shoplist
*/
}
},
}
},
}
在请求方法应该写成:
axios.get("/public/shoplist")
当配置了全局根路径时,改为’ '即可:
const http = axios.create({
baseURL: ''
})
2.第二种,在uniapp的manifest.json文件中,加入下面的代码
"h5": {
"devServer": {
"port": 8080, //端口号
"disableHostCheck": true,
"proxy": {
"/": {
"target": "https://www.xxx.com", //目标接口域名
"changeOrigin": true, //是否跨域
"secure": true, // 设置支持https协议的代理
"pathRewrite": { ///是否重写,重写路径,就是将上面的/替换为''
"^/": ""
}
}
}
}
}
在请求方法应该写成:
uni.request({
url:"/public/shoplist"
})
当配置了全局根路径时,改为’ '即可:
baseUrl = ''
修改后编译一次看效果