1、什么是跨域?
跨域问的是因为浏览器的同源策略,浏览器安全机制,
控制台报错方式:
Access to XLMHttpRequest at ''http------***“from
orgin"http//localhost:8081”-------------
并存在:Access-Control-Allow-Origin 单词,
2、解决跨域问题
第一步
在文件vue.config.js文件中(没有直接创建,和package.json同文件夹)
module.exports = {
devServer: {
proxy: {
'/proxy': {
target: 'http://352.578.214/shiyan/',
changeOrigin: true, // 是否允许跨域
secure: false, // 关闭SSL证书验证https协议接口需要改成true
pathRewrite: { // 重写路径请求
'^/proxy': '' //路径重写(很重要)
}
},
// ....
}
}
}
第二步
在创建axios实例的.js文件中,把baseURL设置为“/proxy”
const request = axios.create({
baseURL: '/proxy',//不是api(在vue.config.js中设置的是:‘/proxy’)
timeout: 5000,
// headers: {
// "Content-Type": "application/x-www-form-urlencoded",
// "Content-Type": "application/json"
// }
})
第三步
export const postdengluApi = params => {
return request({
method: 'post',
url: '/login.php'//接口数据
data: qs.stringify(params),//qs.stringify默认把对象转化为puT形式
})
.then(res => res.data)//此步骤没有做优化。
}