vue 跨域请求解决方案

什么是跨域

现代浏览器出于安全考虑，都会去遵守一个叫做“同源策略”的约定，同源的意思是两个地址的协议、域名、端口号都相同的情况下，才叫同源。这个时候两个地址才可以相互访问 cookie、localStorage、sessionStorage、发送 ajax 请求，如果三者有一个不同，就是不同源，这时再去访问这些资源就叫做跨域。

---

在vue中如何跨域请求，教程如下

• vue.config.js

1. 项目根目录创建vue.config.js文件
2. 在vue.config.js文件内配置以下内容

module.exports = {      
    devServer: {                //webpack-dev-server配置 
        port : 8080,            //配置本项目运行端口
        open: true,				//配置项目第一次运行时打开页面
        proxy: {                //配置代理服务器来解决跨域问题
            '/api': {
                target: 'http://xxxxxx/api',      //配置要替换的后台接口地址
                changOrigin: true,                      //配置允许改变Origin
                pathRewrite: {
                    '^/api': ''
                 }
            }
        }
    }
}

• 请求写法如下

  created(){
    axios.get('/api/xxx/xxx').then(res=>{
      // console.log(res)
      this.list = res.data
    })
  }