前端使用nginx配置反向代理解决跨域问题

个人前端网站：zhangqiang.hk.cn

欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

背景：最近被一个前端请求接口跨域问题困扰了两天，今天终于解决，决定记录一下。

关于跨域的更多内容大家可以看这个视频：9种前端跨域解决方案详解(2020) 或者自行百度一下概念，下面我将直接从前端如何解决的角度出发来写。

0 jsonp解决方案

这是我最初的写法，只需要在前端代码做这个操作就行了：

import $ from 'jquery';
​
$.ajax({
  url: `https://restapi.amap.com/v3/11111111`, // 请求的地址
  method: 'get',
  dataType: 'jsonp',
  success: (res: any) => {
  // console.log('res---:', res)
  return res?.locations;
  },
  error: (res: any) => {
  // console.log('error-res:', res)
  },
})

以往我这样写是可以解决的，但是，这次怎么也不行，后来我发现这个接口不支持jsonp的方式，于是采用了下面这种方法。

1 nginx配置反向代理解决方案

1.1 首先找到我们这个项目nginx里面.conf的配置文件

（这个原来肯定是有的，我们发布线上预览什么的都是会用到这个文件，可以问问后端或运维）

1.2 编辑添加代理

这里有个细节，我在在配置代码的时候在末尾多些了个‘/’，导致线上404，其实正确应该是https://owg.amap.com/token.do 没有后面那个斜杠，得注意一下。

然后我们再wq!强制保存一下，再运行一下nginx -s reload重载一下nginx，ok服务端的代理生效了。

1.3 前端代码请求接口

配置代理的ts文件

import { fetch } from 'dva';
​
const getToken = async () => {
  return fetch(`/getToken?userName=11111`, {
    method: 'GET',
    }).then((res:any) => {
      return res.json();
  });
};

请求接口的ts文件

import { fetch } from 'dva';
​
const getToken = async () => {
  return fetch(`/getToken?userName=11111`, {
    method: 'GET',
    }).then((res:any) => {
      return res.json();
  });
};

Ok，到此，写完了。