啥,要我前端去对接外部?我也不会呀

一般来说，现在公司的业务都是后端去对接外部官方接口。但是现在加个紧急需求，往我这丢了几个对接文档，让前端去对接，我内心也是打咩。

一、梳理开发对接流程

1. 大概预览一遍对接文档，发现是需要引入外部提供给的js文件，然后再调用特定方法名通过jsonp的形式与外部联调。
2. 因为调用特定方法需要提供域名给对方备案，这样才能权限调起接口。业务这边上报了几个域名给对方，但是问题来了，本地要这么联调呢？ 我%x#！@#&*，我也没做过哇，只能查资料开始准备工作。

二、准备工作

1. 首先需要将本地的访问都修改伪装成报备的域名。那要怎么做呢？了解修改hots文件就可以实现，那么开始动手。

1.1 首先找到hots文件，windows它路径一般是在C:\Windows\System32\drivers\etc，如下图

1.2 打开hots文件，添加解析。把本地访问指向后面报备的域名。（域名可以不用加协议，我这里报备的是https的域名）

2. 运行项目。

2.1 一开始只在vue.config.js配置了端口，在通过命令跑起项目

module.exports = {
  devServer: {
    port: 9012,
  },
}
1
2
3
4
5

2.2 复制ip链接，浏览器打开，会出现资源加载不到的问题

2.3 替换成配置hots里面的域名，会发现项目无法运行

想起来报备配置的域名是https，所以vue.config.js里面随便写的port端号号是不行的，因为https默认端口号是443。
2.4 修改端口号为443，并且开启https服务，重跑项目

module.exports = {
  devServer: {
    https: true,
    port: 443,
  },
}
1
2
3
4
5
6

出现以下提示，点击立即前往就行

2.5 进入页面却又会提示以下错误，搜索发现可以配置vue.config.js解决

添加配置

module.exports = {
  devServer: {
    https: true,
    port: 443,
    disableHostCheck: true,
  },
}
1
2
3
4
5
6
7

如果上面这种方案不行可以替换成下面这种：
在webpack 5 中disableHostCheck应该被遗弃了
查看文档了解到需将 disableHostCheck:true
替换为
historyApiFallback: true,
allowedHosts: “all”,

module.exports = {
  devServer: {
    https: true,
    port: 443,
    historyApiFallback: true,
    llowedHosts: "all",
  },
}
1
2
3
4
5
6
7
8

2.6 重跑项目,发现已经是可以进入页面了

3.开始对接

3.1 在idnex.html引入文档提供的外部js

3.2 打开控制台发现以下错误

搜索了解到:https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止，这就会给你带来资源不全的问题了，比如：图片显示不了，样式加载不了，JS加载不了。

解决:. 在index.html页面中加入（meta）头中添加upgrade-insecure-requests

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
1

3.3 刷新页面,会发现调用特定方法成功

4. 到此就可以开始写页面对接其他接口了。