【一次前端跨域问题的探索分享】

本篇文章不讲原理，想看更深的原理的，可以去看其他博主的～

什么是跨域

跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。

所谓同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。

此处可以忽略不看，面试时候喜欢问这些，实战中你只用知道浏览器报的错误是跨域就好了，平时uni-app内置浏览器打开或者开发微信小程序基本上没有跨域问题，但是打开到chrome浏览器或者其他浏览器时才会出现跨域问题。
下面就是所报的错误：
Access to XMLHttpRequest at ‘https://.com///’ from origin ‘http://localhost:8001’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

废话少说，以下就是解决办法：
先查看自己的请求配置中是否设置了withCredentials为true。

方法一：下载chrome插件Allow CORS: Access-Control-Allow-Origin

打开chrome应用商店，搜索Allow CORS: Access-Control-Allow-Origin，第一个就是，然后接下来直接安装拓展就行了（需要自备vpn）；下载完成后，回到页面，在浏览器右上角有个拼图的icon点击可以查看安装的插件，点击Allow CORS: Access-Control-Allow-Origin，打开插件以后点击图标，图标变成彩色以后就是打开了，然后刷新网页，就会发现数据出来了。

缺点：控制台还是会有错误，红的让人看着很不爽。

方法二：甩给后端～

让后端配置请求头，‘Access-Control-Allow-Origin:*’ //允许所有来源访问

缺点：不建议这种方法，会显得自己技术比较low，偷个懒也不是不可以！

方法三：manifest.json中源码视图配置代理

找到h5对象加入devServer,如下：

"h5" : {
        "devServer" : {
            "port" : 8000,
            "disableHostCheck" : true,
            "public" : "0.0.0.0",//内网穿透
            "proxy" : {
                "/api" : { 
                //这里"/api"可以根据自己喜好定义
                    "target" : "https://xxx.xxx.com", //请求的目标域名或者主机名
                    "pathRewrite" : {
                        "^/api" : ""
                    },
                    "changeOrigin" : true,
                    "secure" : false，//如果target写的域名这个属性必须写
                }
            },
            "https" : false
        },

以为到这里就可以了吗？重点来了！！
一定要注意，“/api”这里设置了target，检查自己的项目中的所有请求地址baseUrl是target指向的地址的，把"https://xxx.xxx.com"换成"/api"!!!

另外如果多个请求地址可配置多个代理～

拴Q观看哦！希望能对您有所帮助～