前端跨域问题

什么是跨域？

只要协议、域名、端口有任何一个不同，都被当作是不同的域。

同源即指：协议、域名、端口

一个完整的URL包括：

协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分

以百度的URL为例：

http://www.baidu.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732412

http                         属于协议 (”HTTP”后面的"//"为分隔符)

www.baidu.com                属于域名（也可使用IP地址作为域名使用）

8080                         属于端口 (不是一个URL必须的部分，一般省略端口部分，采用默认端口。)

/news/                       属于虚拟目录 (从域名后的第一个“/”开始到最后一个“/”为止。虚拟目录不是一个URL必须的部分)

index.asp                    文件名（从域名后的最后一个“/”至“？”(或'#'或至结束)为止，是文件名部分。）

boardID=5&ID=24618&page=1    参数（从“？”开始到'#'（或至结束）为止之间的部分为参数部分，又称搜索部分、查询部分。参数间用“&”作为分隔符）

r_70732412                   锚(HTTP请求不包括锚部分，从'#'开始到最后，都是锚部分。)

http://www.baidu.com:8080/

'/' 前相同则不会产生跨域，'/' 前任意位置不同则跨域

跨域问题源于浏览器的 同源策略，是浏览器发出的拦截

项目中解决跨域的方法

一. 项目本地开发（前端解决跨域）

1. 利用浏览器自身设置解决跨域 （一般不要用）

   chrome浏览器

   方法1：
   先关闭谷歌浏览器，然后再cmd里输入

   C:\Users\15379\AppData\Local\Google\Chrome\Application\Chrome.exe --disable-web-security --user-data-dir
   其中C:\Users\15379\AppData\Local\Google\Chrome\Application\Chrome.exe 为浏览器的安装路径。

   方法2：
   首先安装完谷歌浏览器 => 右键属性=> 创建快捷方式 => 创建谷歌浏览器的快捷方式 =>
   右键属性 => q切换到快捷方式页 => 在目标后面增加如下的启动参数：
   --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security => 点击确定保存，大功告成

   注：

   1. 每个--前面都有一个空格。
   2. disable-web-security需要搭配user-data-dir参数一起设置。

   firefox火狐浏览器：

   打开一个空白页，在地址栏里输入about:config，勾选我以了解此风险

   搜索 security.fileuri.strict_origin_policy，将true改为false
   搜索 signed.applets.codebase_principal_support 将false改为true

   如果搜不到的话，可以新增，注意都是布尔类型的，随便在那一条上面右键就可以新
   增，完成后重启火狐浏览器，如果还不行就重启电脑就可以了

2. 在config文件的index中设置代理（模拟nginx反向代理）（常用）

// 1. 配置 baseURL
axios.defaults.baseURL = '/api'  或 在接口url前加 '/api'

//2. 配置 proxyTable
proxyTable: {
  '/api': {
        target: 'http://71.158.4.120:8080/',   //这里配置的是 请求接口的域名
        // secure: false,  // https时必加
        changeOrigin: true,   // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
        // 这里理解成用'/api'代替target里面的地址
          '^/api': '/' 
        }
    }
}

页面原接口：http://71.158.4.120:8080/login
页面解决跨域后：http://localhost:8080/api/login

3. postMessage 跨域通讯（不常用）

//1.发送数据

Window.postMessage('data to send',targetOrigin)

//2.通讯触发的监听方法

window.addEventListener("message", (e) => {
    var origin = event.origin || event.originalEvent.origin; 
      if (origin !== "http://example.org:8080")
        return;
}
, false);

4.JSONP （只支持get请求）

5.iframe+form实现post请求跨域（知道就行吧）

6.WebSocket

二. 项目本地与线上跨域（后端解决跨域）

1.通过nginx反向代理解决 （常用）

2.CORS解决跨域 （常用）

后端修改请求头

header(‘Access-Control-Allow-Origin:*’)                  允许访问的网址

header(‘Access-Control-Allow-Method:POST,GET’)           允许访问的方式