webpack devserver处理跨域怎么做？

Question

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

Answer 1

你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接口相同

Answer 2

试试这样：

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

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

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

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

最简单的办法是让后台接口允许跨域

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。