2022.06.07 前端-uniApp跨域解决办法_uniapp前端跨域

1.1、怎么判断是否跨域？

这就是需要用跨域来请求数据的报错

        

每个uniApp项目都会有一个 manifest.json 的配置文件。

在 manifest.json 里边直接复制下面这串代码即可。

1.2、那我应该怎么使用这个跨域 / 怎么在接口上使用？

然后每个项目都会有一个接口封装的文件，就是集中请求接口的配置文件。或者没有就需要你自己去写或者去查找相关文件的代码，所以学习的时候遇到一个标准的项目示例很重要，那这种标准项目没有人带我们去那里要？当然是github大神啊。然后把接口请求的公共地址改成你的跨域名称/代理名称。

 util.js        示例封装接口如如图，写好后都在main.js引入。

 如下为我项目的接口封装文件，然后在main.js 引入这个文件就可以使用接口了.

api.js

页面.vue        然后直接在页面上使用封装的请求方法，checkLogin就是封装api接口的一个名字，如图：

 还有一种方式就是不封装接口，使用axios直接请求接口写在页面上。

这样项目请求接口的时候就会自动实现跨域了。

 注意：api前面的斜杠很重要，如果不写这个斜杠，会被浏览器判断为是直接访问本地地址加接口然后提示接口404错误找不到接口，直接会访问loaclhost+文件根目录+接口地址。http://localhost:8080/pages/index/api/t/wtdk/mobileVerifyApi

而使用开头的斜杠会访问：http://localhost:8080/api/t/wtdk/mobileVerifyApi

延申错误避坑：当我们写接口地址并且不使用跨域的时候，有的项目直接使用 ip 公共地址，如：192.168.127.0，拼接接口的时候很多人会大意写成192.168.127.0:8080/t/wtdk/mobileVerifyApi，因为开头没有/，会被浏览器判断成直接访问localhost:8080/***/192.168.127.0:8080/t/wtdk/mobileVerifyApi，导致接口404错误，所以其实是你忘了写http://，正确写法http://192.168.127.0:8080/t/wtdk/mobileVerifyApi，http://与 “/” 同理。在跨域的时候不需要写http://作为开头，因为跨域的公共地址已经写了，所以需要使用 “/” 作为开头会避免被浏览器误判。