什么是跨域&为什么会出现跨域--跨域解决方法

1.什么是跨域？

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

2、为什么会出现跨域？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

3、方法

1. 通过jsonp跨域
2. 跨域资源共享（CORS  Access-Control-Allow-Origin: http://api.bob.com）
3. nginx代理跨域

jsonp

原理: 利用script标签的src属性具有天然可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式响应给浏览器。

优点: 完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

缺点：Jsonp只支持get请求而不支持post 请求

 // 原生的实现方式 
let script = document.createElement('script'); 
script.src = 'http://www.wxyweb.com'; 
 
document.body.a(script)
 
function callback(res) { 
    console.log(res)
}

// jquery实现
$.ajax({
     url:'http://www.nealyang.cn/login', 
     type:'GET', 
     dataType:'jsonp',   // 请求方式为jsonp（jsonp 非官方的数据交互协议）
     jsonpCallback:'callback',
     data:{
         "username":"Nealyang"
     } 
})

CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

【前端设置】根据xhr.withCredentials字段判断是否带有cookie

 直接请求服务器 => cors 解决的跨域
    - baseURL: process.env.VUE_APP_BASE_API
    - VUE_APP_BASE_API = 完整服务器地址

   发请求
    - request.post('/sys/login', data)

   实际请求会拼接基地址: 
    - 完整服务器地址 + /sys/login

代理

请求自身服务器 => 代理 解决的跨域
   (1) 配置vue.config.js
        proxy: {
          // 以 /api 开头的路径请求, 认为需要走代理
          // 需要这么发请求:   http://localhost:8888/api/sys/login
          // 代理后:          http://ihrm-java.itheima.net/api/sys/login
          // 将本机地址, 会替换成代理的地址, 进行请求
          '/api': {
            target: 'http://ihrm-java.itheima.net'
          }
        }
       希望代理能生效, 两个条件: 请求本机地址(可省略) + /api路径标识