关于本地开发跨域那点事儿

现在前端开发基本上都是前后端分离了，分离的好处不容多说，但是联调的时候的跨域问题是一定会遇到的。

解决跨域问题常用的解决方案：

• 后端配合：
  • JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。
  • CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。
• 前端解决：
  • nginx反向代理解决跨域设置
  • 修改谷歌浏览器启动参数：具体方法是：
    • 1、创建一个Chrome的启动快捷方式；
    • 2、右键点击快捷方式属性，然后在目标路径后面，添加以下参数：
    • –disable-web-security –user-data-dir=”e:\chromedev“
    • 注意在最新版本的Chrome中，–user-data-dir参数也是必须要添加的，下划线部分可以随便指定到其他路径，这里保存是的Chrome的用户数据的。
  • webpack-dev-server配置跨域方案
    如果你项目是用webpack作为前端自动化构建工具的话，那么可以引用webpack-dev-server来进行配置跨域方案。webpack-dev-server是一个小型的nodejs服务器，是基于express框架的，用于实时监听和打包编译静态资源。其中里面有一个属性是proxy，是专门来配置代理请求接口的。
  • http-proxy-middleware模块设置代理服务

http-proxy-middleware模块设置代理服务

本人接手项目是用jq写的本地页面，接口给的是线上地址，涉及到了跨域问题，后端配置cors无效，又不想配置太多东西，So 采用此方案

• http-proxy-middleware 官方文档传送门

1. 安装node
2. 初始化项目 npm init
3. 安装包 npm i http-proxy-middlewar express -D
4. 新建 server.js 入口文件，配置如下(更复杂配置请参考官方文档)

   const express = require('express');
   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   const app = express();
   app.use('/', express.static('./')); // 设置静态资源访问路径
   app.use('/api', createProxyMiddleware({ target: 'http://www.example.org', changeOrigin: true }));
   app.listen(3000);
   
   // http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
   

5. 配置package.js

   "scripts": {
      "serve": "node ./server.js",
    },
   

6. 运行 npm run serve 可以愉快的调接口了