vue脚手架解决跨域

vue脚手架解决跨域

1.什么是跨域
1.浏览器，端口，域名只要有一项不同就会产生跨域，协议域名端口都相同才同域，否则都是跨域

2.如何解决跨域
1.首先在vue脚手架的根目录下创建一个vue.config.vue文件
2.然后vue脚手架会自动进行webpack配置，而vue.config.js文件就是进行修改默认的该配置的

3.配置的思路
1.创建vue.config.js文件，里面的devServer是进行开发环境的服务器配置的，有proxy是用来进行代理的转发，在proxy里的target设置转发的网址

4.跨域转发
1.因为跨域的问题，axios是无法请求网址数据的，但是浏览器可以，所以，应用代理转发请求数据到我们的网址中，而axios请求该网址，而axios请求该网址，相当于一个中间商进行了一次代码

代码展示

module.exports = {
    devServer: {  //开发环境的服务器配置
        // 是否自动弹出浏览器，默认false
        open: false,
        // 修改默认端口，默认8080
        port: 9090,
 
        proxy: {  //进行代理转发
            '/api': {
                // 转发的网址
                target: "http://m.sirfang.com/api",
                // 是否开启本地代理 默认true
                changeOrigin: true,
                // 重要点
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
 
    }
}

vue文件中

   this.$axios
      .request({ url: "/api/home/shejishi", method: "get" })
       .then(res => {
       console.log(res);
      });

封装api请求后的变化
需要改变request请求里的公共网址设置

const server = axios.create({
    baseURL: '/api',
    timeout: 6000
})