vue中解决跨域问题

vue中解决跨域问题

---

在vue.config.js加入以下代码

module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
    devServer: { 
        // open: process.platform === 'darwin',    // 默认打开的浏览器
        port: 8082,                                // 端口号
        hotOnly: true,                             // 热加载
        proxy: {                                   // 跨域配置,代理对象
            '/api': {                              // 过滤的api
                target: 'http://127.0.0.1:8086',   // 要访问的的后端地址
                changeOrigin: true,                // true，启用跨域
                pathRewrite:{                      // 重写/api路径为''
                        '^/api':''
                }
            }
        }
    }
}

注意，如果是采用axios进行请求的处理的话，axios的实例下的配置url需要更改为：/api

//axiosInstance.js
import axios from 'axios'

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

export default request

然后在需要进行axios请求的模块中，直接使用request就行了。

（不涉及axios进一步的请求拦截处理，以及响应拦截处理的情况下，仅仅是基础入门使用）

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getData()">拿数据</button>
    <p>{{res}}</p>
  </div>
</template>

<script>
import request from '@/config/axiosInstance.js'
export default{
    name:'About',
    data(){
        return{
            res:''
        }
    },
    mounted() {
        
    },
    methods:{
        getData(){
            request({
                url:'/test',
                method:'get'
            }).then((res)=>{
                console.log("拿到了数据")
                console.log(res)
                this.res = res.data[0].userName
                console.log("now"+this.res)
            })
        }
    }
}
</script>