webpack devserver处理跨域怎么做?

image.png
如图,在api.js用对象定义了api,然后再jsx中用BaseUrl.api + '/XXXXX/xxx'来调用接口的,如果使用webpack devserver应该怎么做?
按照图里的配置,运行项目还是从BaseUrl.api 取得接口,没有走webpack devserver。
要解决这个问题应该怎么改动,改api文件还是webpack配置呢?

阅读 3.1k
3 个回答

你baseurl的地址没有匹配你代理/api,也就是说你接口前必须以/api开头,不能含有域名及端口。

需要理解什么是跨域,以及解决方案。其中一个方案就是服务器代理请求,这就是webpack-dev-server的处理方式。
webpack-dev-server起了一个服务,假设路径叫http://localhost:8080,api
地址假设是http://localhost:8081 通过某个路径(一般是/api)来转发到指定的api接口来解决跨域
假设一个请求的完整路径是:http://localhost:8081/login
那么代码写的路径是: /api/login
控制台看到该请求的路径就是:http://localhost:8080/api/login

请求到达webpack-dev-server后,会根据配置的重写(转发)"^api": ""
它将把以/api开头的字符串替换成空字符串,/api/login重写成/login,
然后拼接上target后变成:http://localhost:8081/login

根据这个过程你可以查看最后生成的路径是否和api接口相同

试试这样:

parxy : {
    "/" : {
        // ...
        {
            "^/":""
        }
    }
}

这样一个缺陷是把所有的请求都转发了,包括websocket,或者 :

parxy : {
    "/a" : {
        // ...
        {
            "^/a":"a"
        }
    },
    "/b" : {
        // ...
        {
            "^/b":"b"
        }
    }
}

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题