前端跨域问题解决

一、什么是跨域？

当一个请求的url的协议、域名、端口号三者之间任意一个与页面当前的url不同即为跨域。在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

 什么是同源策略？

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM和JS对象无法获得
• AJAX 请求不能发送

二、常见的跨域场景

知识点：跨域只会出现在浏览器上，小程序和APP开发不会有跨域问题。

特别说明两点：
第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”

1、什么情况下会出现跨域

前端开发过程中会遇到访问请求跨域的问题，比如调用如下方法访问疫情分布的公共接口，就会出现跨域的问题。一般浏览器会有同源策略的限制。同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受影响。所谓同源（同一个域）就是指两个页面具有相同的协议（protocol）、主机（host）和端口号（port）
 

说白了就是域名不同的时候会出现跨域。在域名的:协议。主机名、域名、端口任何一个与当前访问的站点域名不同时就会出现跨域

 出现跨域时，浏览器控制台的报错如下图所示

切记:本内容只讲述了前端解决跨域的办法，并且前端解决跨域问题只在本地开发时有效，项目发布线上需要前端服务器配置请求代理比如nginx的反向代理或后端允许跨域请求
解决跨域的方法就是“欺骗”浏览器或删除浏览器限制

2、uni-app项目解决跨域办法

方法一:使用HBuilderX内置浏览器，内置浏览器是删除了浏览器的跨域限制的。
方法二:在项目根目录manifestjson文件中添加h5配置，点我查看uni-app文档说明。

 3、Vue.js 项目 解决跨域办法 

在项目根目录vueconfigjs文件中添加如下配置：如果没有vue.config.js文件则自己手动添加。

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        // 这里是后台提供给我们的接口地址

        target: 'http://localhost:5000/',

        changeOrigin: true,  //允许跨域

        pathRewrite:{

          /* 当我们在浏览器看到的请求地址为：http://localhost:8080/api/User/GetAllUsers */

          /* 实际上我们访问的地址为：http://localhost:5000/User/GetAllUsers  因为重写了/api */

          /* 如果后台提供的接口本身就带有api，则无需执行重写路径这个步骤 例如:http://localhost:5000/api/User/GetAllUsers */

          '^/api':''  //重写路径

        }

      }

    }

  }

}

上面的代码采用的是proxy反向代理进行跨域的请求，原理是：将域名发送给本地服务器（启动的vue项目的服务器：例如 localhost:8080）,再由本地服务器去请求真正的服务器。

页面请求代码，以axios库为例

 4、终极解决办法，删除浏览器跨域限制

 如果你的项目不是工程化的，比如jQuery技术栈的话用这种方式最简单粗暴

以chrome浏览器为例

【设置步骤】
新建一个Chrome的桌面快捷方式 在快捷方式上右键，点击【属性】，打开【属性】面板在【属性】面板的【目标】中(chromeexe后面)按一下空格，再添加以下代码:

 或者 

 设置成功以后再打开浏览器，会有提示:“您使用的是不受支持的命令行’标记:--disable-web-security，稳定性和安全性会有所下降”

那么，正常用户都可以进行跨域访问了，比方本地的前端项目，直连测试或者线上环境的接口(前提是目标环境在当前浏览器登陆过，已经存在当前账号的cookies， session等信息)