Vue3 解决跨域问题

原创

停留的一抹光 2024-06-21 09:47:51 ©著作权

文章标签 ios Access 拦截器 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者停留的一抹光的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue3 配置 vite.config.js 解决跨域问题

问题

Access to XMLHttpRequest at ‘http://localhost:8080/user/register’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决

原 request.js

// 导入 axios 依赖
import axios from 'axios';
// 定义baseUrl
const baseURL = 'http://localhost:8080';
// 创建实例
const instance = axios.create({
    baseURL: baseURL,
});


// 添加响应拦截器
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert("服务异常");
        return Promise.reject(err);
    }
)

export default instance;

修改 request.js

// 导入 axios 依赖
import axios from 'axios';
// 定义baseUrl
const baseURL = '/api';
// 创建实例
const instance = axios.create({
    baseURL: baseURL,
});


// 添加响应拦截器
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert("服务异常");
        return Promise.reject(err);
    }
)

export default instance;