本次错误反省与跨域代理配置的正确姿势
在开发过程中,遇到跨域问题是常有的事。而这次,我要分享一次关于跨域代理配置的“惨痛”经历,并详细讲解正确的配置方法。说实话,我在这个地方花费了一个下午的时间,真的是既痛苦又懊恼😡😭!
正确方法
在config
中配置跨域代理时,应设置changeOrigin
为true
,而不是设置rewrite
。以下是一个示例配置:
server: {
proxy: {
'/api': {
target: 'https://heimahr.itheima.net',
changeOrigin: true,
}
}
}
正确用法讲解
- 代理路径:以
/api
开头的请求都将被代理处理。 - 目标URL:
target
指定了代理的目标URL。 changeOrigin
:当设置为true
时,代理服务器会“假装”它就是目标服务器(默认为false
)。这里需要注意的是,“假装”意味着即使设置了changeOrigin
,网络请求的URL在浏览器中仍然显示为本地的URL。- 当
changeOrigin
为true
时,会发生以下事情:- 请求的主机名(Host header):会被更改为
target
中的主机名。例如,如果请求原本是发送到localhost:3000/api/users
,那么经过代理后,请求的Host头部将会被改为heimahr.itheima.net
。 - 请求的协议:如果目标URL是HTTPS,那么代理服务器也会将请求升级为HTTPS。
- 请求的主机名(Host header):会被更改为
- 当
- 不使用
rewrite
:不使用rewrite
将其中的/api
前缀替换掉,是因为后端接口自己包含/api
(一般后端接口不会带/api
前缀)。
犯错原因
- 我首先确定错误在API调用处、
request
配置或跨域配置。 - 在
request
中,我错误地在调试拦截器上花费时间,而实际上只需要配置axios.create
。 - 我对跨域配置的原理没有搞清楚。
- 我对后端接口的了解不够深入,错误地假设了接口路径包含
/api
,这是经验主义的一个教训。
最后补充一个验证是否成功跨域发送了请求的方法:
验证是否成功跨域发送了请求
为了验证是否成功跨域发送了请求,你可以检查以下几点:
- 检查响应头:在浏览器开发者工具的“Network”标签中,查看响应头中的
Access-Control-Allow-Origin
字段。如果它包含你的本地URL,或者设置为*
(表示允许任何来源),那么你的请求是成功的。 - 查看响应内容:检查响应内容是否是一个包含请求成功或失败信息的JSON对象。
- 检查代理配置:确保你的代理配置正确无误,特别是
changeOrigin
和rewrite
选项。 - 检查目标服务器配置:确保后端目标服务器配置了正确的CORS策略,允许来自你的本地开发环境的请求。
如果你发现响应头中没有Access-Control-Allow-Origin
字段,或者该字段不是*
或你的本地URL,那么可能是目标服务器没有正确配置CORS,或者代理配置没有正确地转发请求。
通过这次经历,我深刻体会到了理解跨域代理配置的重要性。希望我的分享能对你有所帮助,让你在遇到类似问题时能够迅速解决,避免像我一样浪费宝贵的时间😉💪!