axure使用nginx反向代理完美解决接口跨域问题

问题描述

在使用axure请求接口的过程中，由于浏览器安全策略的限制，常常会遇到跨域问题，如下图：

解决思路

解决跨域有很多办法，本文将使用nginx反向代理来解决跨域问题。实现原理将axure的请求发送到代理服务器，由代理服务器进行请求转发。

解决步骤

准备axure

文章以网易云搜索接口http://interface.music.163.com/weapi/search/get为例，使用axure请求该接口。

• 页面增加载入事件，添加打开链接，增加以下js代码。该代码主要用请求接口的加密处理。

javascript:
/*导入js*/
$axure.utils.loadJS("https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/crypto-js/4.1.1/crypto-js.min.js");
1
2
3

• 在axure中添加搜索框，添加单机事件，打开链接中增加js代码。

javascript:
/*加密*/
function encrypt(str, str2) {
   
  const key = CryptoJS.enc.Utf8.parse(str2);
  const iv = CryptoJS.enc.Utf8.parse("0102030405060708");
  const encrypted = CryptoJS.AES.encrypt(str, key, {
   
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
};


/*加密请求参数*/
function encryptedParam(str){
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19