Vue3 跨域问题解决方案

20
四月
2021

1、配置跨域

配置文件中:vue.config.js(vue2为config下面的配置文件)
切记在修改配置文件后需要重新启动项目,在热部署是无法修改配置的

module.exports={
    devServer:{
        proxy:{
            '/api':{
                target: 'http://47.95.228.79:2001',
                changeOrigin:true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

    }
}

2、编写请求

注意下面内容中的api 就会被替换为上面的地址
request.js

import axios from 'axios'

export function request (config){
    // axios.defaults.baseURL = '/api'
    // axios.defaults.headers.post['Content-Type'] = 'application/json';
    const instance  =  axios.create({
        baseURL: '/api',
        timeout: 5000,
    })
    instance.interceptors.request.use(config => {
        console.log("请求成功")
        return config
    },err=>{
        console.log("请求失败:"+err)
    })

    instance.interceptors.response.use(config=>{
        console.log('响应成功')
        return config.data.data
    },err=>{
        console.log("错误:"+err)
    })

    //发送真正的网络请求
    return instance(config)
}

3、通过request发送请求

例如
注:上面的request位于src下面的network文件夹中(自己创建)

import {request} from '@/network/request'


export function test(){
    return request({
        url: 'test',
        method: 'get'
    })
}
TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员