proxy解决跨域问题举例

proxy解决跨域问题的一个举例是使用http-proxy-middleware。这是一个在项目使用vue-cli脚手架搭建时常用的方法。首先，需要安装http-proxy-middleware模块。然后，在项目的配置文件中（一般是vue.config.js），添加以下代码：

const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    before: function(app) {
      app.use(
        '/api',
        proxyMiddleware({
          target: 'http://example.com', // 目标URL
          changeOrigin: true,
          pathRewrite: {
            '^/api': '' // 可选的路径重写
          }
        })
      );
    }
  }
};

以上代码会将以`/api`开头的请求转发到目标URL。例如，如果你的项目中有一个请求`/api/users`，它会被转发到`http://example.com/users`。这种方式可以解决跨域问题，因为浏览器会将请求发送到同源策略允许的本地地址，然后由代理服务器将请求转发到目标地址。这样就可以实现跨域访问接口了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [proxy代理解决跨域问题](https://blog.csdn.net/qq_42054470/article/details/116591869)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [跨域系列之proxy代理，解决跨域的方法之一](https://blog.csdn.net/weixin_52063276/article/details/122231592)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Vue项目中跨域问题解决方案](https://download.csdn.net/download/weixin_38619207/14815135)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]