一下午的时间只为产出一篇博客？”害人“的跨域代理

本次错误反省与跨域代理配置的正确姿势

在开发过程中，遇到跨域问题是常有的事。而这次，我要分享一次关于跨域代理配置的“惨痛”经历，并详细讲解正确的配置方法。说实话，我在这个地方花费了一个下午的时间，真的是既痛苦又懊恼😡😭！

正确方法

在config中配置跨域代理时，应设置changeOrigin为true，而不是设置rewrite。以下是一个示例配置：

server: {
  proxy: {
    '/api': {
      target: 'https://heimahr.itheima.net',
      changeOrigin: true,
    }
  }
}

正确用法讲解

1. 代理路径：以/api开头的请求都将被代理处理。
2. 目标URL：target指定了代理的目标URL。
3. changeOrigin：当设置为true时，代理服务器会“假装”它就是目标服务器（默认为false）。这里需要注意的是，“假装”意味着即使设置了changeOrigin，网络请求的URL在浏览器中仍然显示为本地的URL。
   • 当changeOrigin为true时，会发生以下事情：
     • 请求的主机名（Host header）：会被更改为target中的主机名。例如，如果请求原本是发送到localhost:3000/api/users，那么经过代理后，请求的Host头部将会被改为heimahr.itheima.net。
     • 请求的协议：如果目标URL是HTTPS，那么代理服务器也会将请求升级为HTTPS。
4. 不使用rewrite：不使用rewrite将其中的/api前缀替换掉，是因为后端接口自己包含/api （一般后端接口不会带/api前缀）。

犯错原因

1. 我首先确定错误在API调用处、request配置或跨域配置。
2. 在request中，我错误地在调试拦截器上花费时间，而实际上只需要配置axios.create。
3. 我对跨域配置的原理没有搞清楚。
4. 我对后端接口的了解不够深入，错误地假设了接口路径包含/api，这是经验主义的一个教训。

最后补充一个验证是否成功跨域发送了请求的方法：

验证是否成功跨域发送了请求

为了验证是否成功跨域发送了请求，你可以检查以下几点：

1. 检查响应头：在浏览器开发者工具的“Network”标签中，查看响应头中的Access-Control-Allow-Origin字段。如果它包含你的本地URL，或者设置为*（表示允许任何来源），那么你的请求是成功的。
2. 查看响应内容：检查响应内容是否是一个包含请求成功或失败信息的JSON对象。
3. 检查代理配置：确保你的代理配置正确无误，特别是changeOrigin和rewrite选项。
4. 检查目标服务器配置：确保后端目标服务器配置了正确的CORS策略，允许来自你的本地开发环境的请求。

如果你发现响应头中没有Access-Control-Allow-Origin字段，或者该字段不是*或你的本地URL，那么可能是目标服务器没有正确配置CORS，或者代理配置没有正确地转发请求。

通过这次经历，我深刻体会到了理解跨域代理配置的重要性。希望我的分享能对你有所帮助，让你在遇到类似问题时能够迅速解决，避免像我一样浪费宝贵的时间😉💪！