关于uniapp的跨域

前言：

在很多人使用uniapp，与后端对接时有事会遇到跨域问题，而且由于每个后端的代码与开发风格不一致，导致有事需要跨域有时不需要，而且又会出现明明配置了跨域，但依旧没有解决的情况，这种一般要进行很长时间的沟通，这边把我目前所遇到的后端对接解决跨域的配置进行总结一下，以帮助各位同道在遇到后端对接跨域问题的时候可以做参考

一、在请求接口的时候，无论是否需要登录凭证，都报跨域错误

例如首页轮播图等，这种就是需要处理跨域，处理方式为：

在manifest.json-源码视图- "h5"中加上：

"devServer": {
	"port": 8080,
	"disableHostCheck": true,
	"proxy": {
	"/api": {
	"target": "http://www.baidu.com/",
	 "changeOrigin": true,
	 "secure": false,
	 "ws": false,
	  "pathRewrite": {
	  "^/api": "/api"
	   }
      }
    }
}

解释：

port：端口号（本地端口号，一般为8080,8081等）；

disableHostCheck：不必在意，设置成true即可；

proxy：理解为屏障，每一个请求都会在proxy中进行判断是否需要做处理；

api：当请求路径里有api时，就会使用以下的配置（例如http://baidu.com/api，带api的就会做处理）。

如果想要所有请求都进行处理，将/api换成/ 不推荐，最好让后端加一个公共的接口前缀，以免把其它的本地请求污染了，而且全部都用/，后期如果做单独处理接口的时候很不好处理；

target：这个地方换成你的网络请求地址。这属性的意思是以此地址作为代理进行请求跨域，简单的说就是你要跨域的请求地址，记得开头加http；

changeOrigin：不用在意，按上面的代码设置就行；

secure：不用在意，按上面的代码设置就行；

ws：不用在意，按上面的代码设置就行；

pathRewrite：很重要，必需，前面的那个^/api意思是以api为开头的路径，根据业务需要自行调整。

后面的那个/api，意思是以替换掉api的路径，简单的说你把后面的/api换成/666（"^/api": "/666"） 那么在请求中，http://www.baidu.com/api 就会变成 http://www.baidu.com/666；

注意：把uni.request的url参数删除为空；

---

当然，还有个更方便的方法，就是直接让后端开cosr（在响应头上设置共享资源）组件，这样就可以直接访问了，不存在跨域问题，就看后端需不需要考虑安全性，给不给你开

---

检查跨域是否设置完毕：

打开控制台，进入网络选项（Network），看一下发送的请求路径是否和你设置的一样，如果发送的是“Request URL:你设置的网络地址/接口名”，说明跨域设置成功，如果是“http://localhost:你的本地端口/接口名”那就是没有设置成功，需要看一下是否配置有错误；

二、只有需要登录凭证的接口会报跨域错误，其它的公共接口正常请求

解决：问一下后端接收登录凭证的字段名，uniapp中封装好的请求中（uni.request），Authorization字段为token验证字段。如果不一致，与后端沟通看能否调整，否则就只能自定义请求头，但自定义请求头会请求报错，因此需要进行跨域配置。

三、请求发出了，后端返回数据报错（token key 为空）

解决：一般是token验证的参数错误，或者请求头上没有给到token

四、请求发出，没有报跨域错误，请求头上也有token，但返回数据始终未登录

部分后端喜欢在登录凭证上的验证加一个：Bearer （后面是token数据），这个需要和后端沟通，询问清除他那边的判断条件，如果有apifox，可以在apifox上运行看一下是由于什么问题

一般情况下有几种可以供参考：

1、后端在登录凭证上加了额外的判断，例如上面的那个情况；

2、后端生成的token错误，这个可以在apifox上测试；

3、前端请求头上没加上或加上了但内容为空，错误数据等；

对于萌新而言必须知道的跨域概念：

所有的本地开发，前端跨域配置方式，包括代理转发（在vue.config.js、manifest.json中配置），浏览器属性更换请求目标，内网穿透等等，本质上来说都是在本地请求的时候去以线上请求方式绕过浏览器安全策略，都是不能在上线的时候用的，上线的时候需要视情况而定，让后端给设置一下响应头（cors组件），或者部署项目的时候前端与后端部署到同一个地址中，前期开发配置跨域是为了安全起见；

关于cors（设置响应头组件）前端应该了解的部分：

cors是一个可以设置指定访问源的组件，后端可以设置指定源，一般来说，上线时配置的域名是必不可少的，还有就是前端在本地开发的域名,【http://localhost:8080或8081/8082/8083……】,前端在控制台-网络（Network）点击请求后，在请求头中的Access-Control-Allow-Origin字段可以看，本地开发需要让后端给前端设置一下白名单，线上开发则在组件中需要添加上线上的域名