标签：axios http 跨域 devApi middleware js 拦截器 请求

1.npm安装这两个依赖

        npm install http-proxy-middleware,

        npm install axios 

2.src下新建文件setupProxy.js配置跨域信息

// 配置跨域
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        "/devApi",
        createProxyMiddleware({
            target: http://xxxxxxxxx,  // 服务器请求地址
            changeOrigin: true,      //允许跨域
            pathRewrite: {
                "/devApi": '',       //替换为空，根据自己项目地址，我这里为空
            }
        })
    );

};

       注意一下问题：

       1.修改consfig文件夹下paths.js文件 proxySetup的路径指向我们新建的文件: setupProxy.js

        2.这里和大家探讨一下setupProxy.js内容，欢迎留言评论

                devApi是拦截器里的baseURL 地址拼接上请求接口+浏览器地址 http://localhost:3000/devApi/login/              

                1.匹配找到devApi 后去做代理 http://xxxxxxxx

                2.pathRewrite 讲dveApi 替换成 空内容 /devApi/login/ => /login/

                3.替换成之后地址为 http://xxxxxxx/login/

        这里给出拦截器request.js文件代码

import axios from "axios" // 引入 axios
// 1、创建实例
const service = axios.create({
    baseURL: "/devApi", //不同环境下读取文件变量值
    timeout: 3000,
    headers: { 'X-Custom-Header': 'foobar' }
});

//2、请求拦截 // 添加请求拦截器
......
// 3、响应拦截 // 添加响应拦截器
......
http://www.axios-js.com/zh-cn/docs/ axios官网地址

        api接口给请求代码 

//api 请求处理
import service from "../utils/request"; //引入拦截器

// 配置登录接口请求
export function Login(data) {
    return service.request({
        url: "/login/",
        method: "post",
        data: data,  //post请求
    })
}

 到此我们就可以做正常的数据请求了，在需要的地方调用接口，就可正常的传递参数了，有什么问题留言评论哦，喜欢的一键三连！！！

标签：axios,http,跨域,devApi,middleware,js,拦截器,请求
来源： https://blog.csdn.net/weixin_46146313/article/details/119420560

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。