Y18给你解决跨域问题

什么是跨域

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

问题所在：

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的一种方案，部分代码截图如下，仅供参考哦

跨域的bug：

---

原因分析：

这就是我们通常会跨域跟我们写的项目冲突了的问题，

如何解决跨域：

在根目录创建vue.config.js

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

请求数据

    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文件的内容,一定要重启项目