从URL到跨域

一、什么是URL

URL全称为统一资源定位符。基本的URL会包含协议、服务器名称、资源文件路径名称。一个完整的URL中可以包含协议、域名、端口号、资源文件路径名称、参数与hash值六个部分。

语法：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件名后缀?参数名=参数值&参数名=参数值#HASH值

1. 协议：用来完成客户端和服务器之间的数据传输,传输协议可以分为三类

http：超文本传输协议。客户端和服务器传输的内容除文本以为,还可以传输图片、音频和视频等文件流（如：二进制编码 || base64编码）,还包括一些XML格式的数据等。

https：http ssl协议。https协议比http协议更加安全，因为数据内容的传输通道是经过ssl加密的(需要在服务器端进行特殊的处理)，涉及金融类网站一般都是用https协议
ftp：资源文件传输协议。用于客户端把资源文件上传到服务器端，或者从服务器端下载一些资源文件。ftp协议一般情况可传输的内容会比http这类协议传输的内容多。

2.域名：用于解析对应的IP地址，便于记忆。域名分为三级

一级域名：baidu.com
二级域名：www.baidu.com || sports.baidu.com || ai.baidu.com
三级域名：my.sports.baidu.com

3.端口号：在服务器发布项目的时候，可以通过端口号区分当前服务器上不同的项目。

一台服务器的端口号取值范围在0~65535之间，如果电脑上安装了很多程序，有一些端口号是被占用的。

http：默认端口号80
https：默认端口号443
ftp：默认端口号21

4.资源文件路径名称

在服务器中发布项目的时候，一般会配置一些默认文档，即使用户不输入文件的名称，服务器也会默认找到配置好的文档。

为了做SEO优化。通常会把一些动态页面的地址进行URL重写（需要服务器处理）

5.路径参数

把一些值通过key=value的方式放在URL末尾。通过？号传递

在ajax的get请求中。我们可以通过问好传递参数的方式，在客户端把一些信息传递给服务器。服务器通过接受不同的传递信息，返回不同的数据
如果想要清除ajax get 方法的缓存。可以通过：？math_random=0.123456;实现

6.HASH值

HASH值可以作为在页面中的锚点定位

在单页面应用开发中作为前端路由使用如：Vue Router 、 React Router

二、同源策略

同源策略（Same-Origin Policy）是浏览器的一个安全限制，从一个源加载的文档或脚本默认不能访问另一个源的资源。最早由Netscape公司提出。所谓同源就是要求域名、协议、端口号相同。非同源的脚本不能访问或者操作其他域的页面对象(如DOM等)。

作为著名的安全策略。虽然同源策略只是一个规范，并不强制要求。但现在所有支持JavaScript的浏览器都会使用这个策略，以至于该策略称为浏览器最核心的安全功能。如果缺少同源策略。web的安全将无从谈起。

1.同源策略的要求

同源策略要求域名、协议、端口号保持一致。

同域：host相同。顶级域名，一级域名，二级域名，三级域名等必须相同。且域名不能与ip对应
同协议：http与https协议保持一致
同端口：端口号必须相同

如果是协议和端口造成的跨域问题无法在前台解决

在跨域问题上，域仅仅是通过 URL首部识别，而不会去尝试判断相同的IP地址对应着两个域或两个域是否在一个IP上

例如：
1.http://www.a.com/a.js                同协议，同域，资源文件路径不同
  http://www.a.com/b.js                允许通信
  
2.http://www.a.com/lab/a.js            同协议，同域，不同资源路径文件夹
  http://www.a.com/script/b.js         运行通信
  
3.http://www.a.com:8000/a.js           同协议，同域，不同端口
  http://www.a.com/b.js                不允许通信
  
4.http://www.a.com/a.js                不同协议，同域
  https://www.a.com/b.js               不允许通信

5.http://www.a.com/a.js                同协议，不同域名和域名对应ip
  http://70.32.92.74/b.js              不允许通信

6.http://www.a.com/a.js                同协议，主域相同，子域不同
  http://script.a.com/b.js             不允许通信（cookie这种情况下也不允许访问）

7.http://www.a.com/a.js                同协议。同一级域名，不同二级域名
  http://a.com/b.js                    不允许通信（cookie这种情况下也不允许访问）

8.http://www.cnblogs.com/a.js          同协议，不同域名
  http://www.a.com/b.js                不允许通信

2.同源策略的限制

同源策略下的web世界。域的壁垒高筑。从而保证各个网页相互独立。互相之间不能直接访问。

iframe限制：可以访问同城资源，可读写。访问跨域页面时，只读。
Ajax限制：同域资源可读写。跨域请求会直接被浏览器拦截(谷歌浏览器chrome下跨域请求不会发起，其他浏览器一般都是可发送跨域请求，但响应会被浏览器拦截)
Scrpit限制：script并无跨域限制。因为script标签引入的文件不能被客户端的js获取到。不会影响到原页面的安全。因此script标签引入的文件不需要遵守浏览器的同源策略。

3.如何解决跨域

Webpack代理

在vue脚手架中会自动生成一份webpack配置文件，便于打包时使用。可以通过webpack的代理实现

 //在vue的全局文件 vue.config.js中 找的webpack 的 devServer 配置 并进行如下配置
 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 代理
    proxy: {
      // 拦截key规则,把请求拼接target的目标 并发送
      // 代理帮我们模拟的请求,使得服务器无法感知当前请求是跨域请求 于是不再检测
      '^/': {
        target: “http://www.???.com”,   //需要代理的协议，域名，端口号
        changeOrigin: true,            // 如果是跨域请求应该写上
        pathRewrite: {                // 可以将api中的某个路径文件 替换成需要的字符
          // '/admin': '/api'        // /admin/user/list ==> /api/user/list
        }
      }
    }
    // before: require('./mock/mock-server.js') //不需要
  },

后台配置cors

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 参照文档将后台配置跨域资源共享。可以实现前端无感知请求数据

注意：只有进行请求，服务器的预检测就会自动发送一个 options 请求来检测服务器是否可用。如果请求跨域则会返回不可用。当后台配置了cors后则可以正常发送请求

nginx

使用nginx代理服务器配置解决跨域