如图,在api.js用对象定义了api,然后再jsx中用BaseUrl.api + '/XXXXX/xxx'来调用接口的,如果使用webpack devserver应该怎么做?
按照图里的配置,运行项目还是从BaseUrl.api 取得接口,没有走webpack devserver。
要解决这个问题应该怎么改动,改api文件还是webpack配置呢?
如图,在api.js用对象定义了api,然后再jsx中用BaseUrl.api + '/XXXXX/xxx'来调用接口的,如果使用webpack devserver应该怎么做?
按照图里的配置,运行项目还是从BaseUrl.api 取得接口,没有走webpack devserver。
要解决这个问题应该怎么改动,改api文件还是webpack配置呢?
试试这样:
parxy : {
"/" : {
// ...
{
"^/":""
}
}
}
这样一个缺陷是把所有的请求都转发了,包括websocket,或者 :
parxy : {
"/a" : {
// ...
{
"^/a":"a"
}
},
"/b" : {
// ...
{
"^/b":"b"
}
}
}
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
10 回答11.1k 阅读
15 回答8.4k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
你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接口相同