欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端代理跨域

程序员文章站 2022-05-13 19:39:44
...

之前在学校最早接触的跨域方式有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,
}