本地前端服务与第三方接口的跨域问题怎么解决？

Question

问题描述

小弟经常遇到一种问题：本地npm run dev跑起一个前端项目，调用第三方接口时被同源策略限制，get请求倒是可以采用jsonp去解决（目前遇到的接口一般都支持），但post接口就行不通了，只有在线上环境才正常。请问该如何实现本地调试？

Answer 1

解决方案有很多

1. 如果后端的代码可以改，直接添加响应头，通过cors的方案解决
2. 自己用node搭建一个服务，做一个http请求转发的工作
3. nginx代理
4. webpack-dev-server的proxy的功能了解下，帮你在开发环境下做代理

   推荐使用第四种方案

链接描述

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

Answer 2

跨域通常解决方式：

• jsonp(缺点只支持get)
• cors(跨域资源共享 这种模式需要后端配合)
• 代理(不依赖后端)

现在只是开发环境调试的话，使用 webpack提供devServer来配置代理即可, 详情点击这里