同源策略和跨域解决方案

## 简介
同源策略是浏览器的一个安全机制，它是浏览器为了保护用户信息的安全而设定的。简单来说，同源策略要求协议、域名和端口号三者必须相同，才能被认为是“同源”。

什么是跨域

网页在请求服务器的时候,不同协议、不同域名和不同端口号 就会造成跨域

跨域的解决方案

jsonp

<script>标签不受同源策略限制的特性,只支持GET请求

• 原理：利用html对于script、img、link、iframe等标签发起的请求不受同源策略的影响，从而利用script标签发送请求。
• img标签默认会将响应回来的内容当做图片解析
• link标签默认会将响应回来的内容当做css解析
• iframe标签默认会将响应回来的内容当做html页面解析
• script标签默认会将响应回来的内容当做js代码执行

例:
后端:

前端:

应用场景：百度联想词的搜索、京东、...

cors

原理：在请求的目标服务器中，设置允许跨域的响应头，浏览器就没有立场去拦截请求信息了。

给目标访问设置响应头：

'Acess-Control-Allow-Origin': '白名单地址'

* 代表所有

服务器代理

原理：浏览器只能限制浏览器打开的页面中的ajax，但是无法限制服务器，因为服务器代码不运行在浏览器。所以前端运行在浏览器的页面，发送请求的时候不直接发给目标服务器，而是发给当前打开页面使用的服务器，当前打开页面的服务器发起请求，向目标服务器获取数据，将数据响应给当前前端页面的ajax。

需要在服务器上设置代理配置，nodejs服务器，使用代理需要依赖第三方模块：http-proxy-middleware

devServer: {
    // 其他代码省略。。。。。
    
    // 代理配置
    proxy: {
      // 代理服务器，当请求的网址是http://localhost:3000的时候，会转成http://192.168.80.115:3000
      // /api 是 看接口文档所写的，每当访问本地的/api接口时，会转化为访问真实的服务器
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
 }