proxy请求代理 - 图1

上一小节中,我们还存在一个问题未处理,就是跨域访问问题。更多跨域说明,可以查看跨域

详细的 proxy 技术可以查阅其他资料,这里我只做简要说明:之所以会出现跨域访问问题,是因为浏览器的安全策略。所以我们预想是不是有一种方式,能够绕过浏览器的安全策略?

那就是先请求一个同源服务器,再由服务器去请求其他的服务器。比如:

  • 我们本来是要请求 https://pvp.qq.com 服务器,但是它存在跨域。
  • 所以我们先请求了 http://localhost:3000 (假设的),它不存在跨域问题,所以它受理了我们的请求,并且我们可以取得它返回的数据。
  • 而由 http://localhost:3000 返回的数据,又是从真实的 https://pvp.qq.com 获取来的,因为服务端不是在浏览器环境,所以就没有浏览器的安全策略问题。
  • 因为 http://localhost:3000 (假设的)这个服务器,它只是把我们请求的参数,转发到真实服务端,又把真实服务端下发的数据,转发给我们,所以我们称它为代理。

umi 提供了 proxy 来处理这个问题。


配置 proxy

要在 umi 中使用 proxy 非常简单,只要在配置文件中配置就可以了。
./.umirc.js

  1. export default {
  2. plugins: [
  3. ...
  4. ],
  5. "proxy": {
  6. "/api": { ---step1
  7. "target": "https://pvp.qq.com", ---step2
  8. "changeOrigin": true, ---step3
  9. "pathRewrite": { "^/api" : "" } ---step4
  10. }
  11. }
  12. }

注意层级,proxy在最外层,不要写到插件plugins里面

  • step1 设置了需要代理的请求头,比如这里定义了 /api ,当你访问如 /api/abc 这样子的请求,就会触发代理
  • step2 设置代理的目标,即真实的服务器地址
  • changeOrigin 设置是否跨域请求资源
  • pathRewrite 表示是否重写请求地址,比如这里的配置,就是把 /api 替换成空字符

src/app.ts

  1. import { ResponseError } from 'umi-request';
  2. export const request = {
  3. - prefix: 'https://pvp.qq.com',
  4. + prefix: '/api',
  5. errorHandler: (error: ResponseError) => {
  6. // 集中处理错误
  7. console.log(error);
  8. },
  9. };

修改请求地址,前缀改成 /api ,其实通过代理,最后真实访问的地址还是 https://pvp.qq.com/web201605/js/herolist.json
这时候我们就取到了网络上的数据了。

image.png


代理只是请求服务代理,不是请求地址

我们打开控制台,可以看到我们的请求地址是 http://localhost:8000/api/web201605/js/herolist.json ,响应200,并返回了真实数据。

你不会在浏览器的控制台中查看到我们真实代理的地址,这里需要注意,代理只是将请求服务做了中转,设置proxy不会修改请求地址。


最小成本设置proxy

这里指的是后续和服务端对接的时候,如何优雅的设置 proxy 。

step1

向服务端要一个,不需要授权,不需要登录,get请求的接口。
如:https://api.douban.com/v2/movie/in_theaters

step2

将服务端给我们的地址,直接在浏览器中访问,如果能正确返回数据,那说明服务端给的接口没有问题。

proxy请求代理 - 图3

如果返回错误,那就可以先不往下进行了,可以先让服务端修正他的错误

step3

查看接口文档,设置正确的代理前缀。
比如接口是 /v1/abc /v2/sss /v2/xxx 这样的,那target应该是 https://api.douban.com/
比如接口是 /v2/abc /v2/sss /v2/xxx 这样的,那target应该是 https://api.douban.com/v2/

step 4

设置 proxy
比如接口是 /v1/abc /v2/sss /v2/xxx 这样的,那target应该是 https://api.douban.com/

  1. "proxy": {
  2. "/api": {
  3. "target": "https://api.douban.com/",
  4. "changeOrigin": true,
  5. "pathRewrite": { "^/api" : "" }
  6. }
  7. }

请求地址 /api/v1/abc /api/v2/sss /api/v2/xxx
比如接口是 /v2/abc /v2/sss /v2/xxx 这样的,那target应该是 https://api.douban.com/v2/

  1. "proxy": {
  2. "/api": {
  3. "target": "https://api.douban.com/v2/",
  4. "changeOrigin": true,
  5. "pathRewrite": { "^/api" : "" }
  6. }
  7. }

请求地址 /api/abc /api/sss /api/xxx

step 5

如果你如上操作还是不行,请不要想为什么设置proxy无效,到底proxy要怎么设置,这样的问题。
也不要去问任何人,在任何开源项目的iss里面提问题,因为他们能够给你的帮助,不会比上述更详细了。
不行,只有一个问题,那就是你不够细心,设置错误咯,那就从step1再走一回,加油吧!少年