webpack构建的项目可以在开发环境使用devServer.proxy配置代理。

那么传统的jq或者原生js项目如何在不麻烦后端或者运维的情况下自己解决呢？

准备一个jq项目demo

mkdir my-project && cd my-project && touch index.html




  
  
  
  


  

然后live server浏览器打开，不出意外地得到了跨域的错误信息

Access to XMLHttpRequest at 'http://localhost:8001/user/login' from origin 'http:localhost:5500' has been blocked by CORS policy

解决问题

在当前项目根目录下执行npm init，一路回车，得到一个package.json文件

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "http.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

根目录创建http.js文件，与package.json的main指向文件名一致，然后安装插件

npm i express nodemon http-proxy-middleware

• express：一个nodejs框架
• nodemon：nodejs热更新插件，修改代码不用重启服务
• http-proxy-middleware：一个用来做代理的中间件

// http.js
let express = require('express');
let app = express()
let { createProxyMiddleware } = require('http-proxy-middleware');
const options = {
    target: 'http://localhost:8001', // 要代理的目标URL
    changeOrigin: true, // 是否需要改变用户端请求域名为目标URL
    ws: true, // 是否代理websocket
    secure: true, // 是否代理https
    pathRewrite: {
        '/api': '', // 把'/api'重写为''，实际访问时路径中就不会带'/api'
    },
};
// 通过node服务访问html页面
// express.static(root, [options])是express中间件，用来托管静态资源
// 通过访问http://localhost:3000就可以访问my-project目录下的文件
app.use('/', express.static('/Users/user/Documents/my-project'))
// 使用http-proxy-middleware插件代理含有'/api'的请求
app.use('/api', createProxyMiddleware(options));
app.listen(3000,()=>{
    console.log("server running at http://localhost:3000'")
})

package.json中添加一条script脚本：

"start": "nodemon http.js"

终端执行npm run start

修改html中请求的代码为：

此时，用户端页面location.href的协议、域名、端口都和服务端保持一致了，问题解决。