前端代理跨域

之前在学校最早接触的跨域方式有jsonp跨域再到后来接触到了Node使用cors跨域，这两种跨域方式做起来简单，但是却都需要后端代码支持。尤其是jsonp回调的名称也需要约定并且只支持geyt请求，前后过于耦合。

所以公司有些项目会采用nginx跨域的方式，但是前端在本地开发时无nginx配置，如何访问后端资源呢？

在package.json中加入如下配置（配置解析：当访问接口有api字段，那么将该接口的访问域名全部代理到target所设置的域名下）

// package.json中增加如下配置
"proxy": {

    "/api": {

        "target": "https://baidu.com",// 代理到该域名

        "changeOrigin": true

    }

},

当然以上配置也只是在开发环境有效，如果测试环境则仍需要nginx配置

PS：如果您只想了解反向代理实践那么以上内容足以，如果您对更多有趣的东西感兴趣可以继续往下看

这里先介绍个东西

nodemon，在开发react的时候，每次更改配置文件，均需重启一下，服务才能生效。nodemon的出现，可以随时监听文件的变更，自动重启服务。

那么我们可以将proxy的配置加入到nodemon中，这样只要配置发生变化就可以自动重启服务

"start": "nodemon xxx"

那么具体监控哪些文件，nodemon有类似package.json一样的文件叫nodemon.json

// nodemon.json
{
  "watch": ["proxy.js"], // 监听src目录下文件变化
  "ext": "ts json", // 监控指定后缀名的文件，不同的后缀用空格隔开
  "ignore": [".git", "src/**/*.spec.ts"], // 忽略的文件名后缀或文件夹
}

这时候我们修改从proxy.js导出的配置即可调整跨域链接并且项目自动重启

// proxy.js
module.exports={
    target:"www.baidu.com",
    changeOrigin: true,
}