解决vue跨域请求问题

1. 什么是跨域

当协议,域名,端口有一样不同就会产生跨域.

2. vue解决跨域

以此地址为例: http://m.sirfang.com/api/home/shejishi

axios.get('http://m.sirfang.com/api/home/shejishi').then(res=>{
	console.log(res)
})

会报错:

解决方案:

首先在根目录创建一个vue.config.js文件[可以修改webpack默认配置]

// 会覆盖webpack默认配置
module.exports = {
	// 开发环境的服务器配置
    devServer: {
        open:true,	// 是否自动弹出浏览器
        port:9090,	// 修改默认端口
        proxy: {	// 代理转发(服务器与服务器之间是不存在跨域的)
            "/api": {
                // 1 目标路径
                //重写路径为api
                target: "http://m.sirfang.com/api",
                //2 允许跨域
                changOrigin: true,
                //3 重写路径
                pathRewrite: {  // 这里理解成用‘/api’代替target里面的地址
                    '^/api': ''
                },
                secure: false, // 如果是https接口，需要配置这个参数
                ws:true,	   // 是否开启websockes协议请求
            }
        }
    }
}

请求数据

    axios.get('/api/home/shejishi').then(res=>{
      console.log(res);
    })

我们可以利用axios的baseUrl直接默认值是 api，这样我们每次访问的时候，自动补上这个api前缀，就不需要我们自己手工在每个接口上面写这个前缀了
在main.js中

import axios from 'axios'
Vue.prototype.$axios = axios
axios.default.baseURL = '/api'

注意:当你修改vue.config.js文件的内容,一定要重启项目