前端跨域问题

跨域：

跨域问题产生根本原因是Ajax请求受到浏览器的同源策略的限制，同源策略是浏览器最基本的安全功能，它会阻止两个非同源地址进行数据交互。所谓同源就是指两个URL地址必须有相同的协议，域名和端口号，如果有一个不同就会受到浏览器同源策略的限制无法进行数据交互从而产生跨域问题。且只有Ajax请求才会跨域问题。

---

主要解决方案：

反向代理服务器（服务器转发）

代理服务器解决跨域问题其实是利用了同源策略只受限于浏览器访问服务器，对于服务器访问服务器并没有限制的特点，作为中间服务器做了一个请求转发的功能。 具体来说，就是当前端网页在浏览器中发起网络请求时，其实这个请求是发送到代理服务器上的，然后代理服务器会将请求转发给目标服务器，再将目标服务器返回的响应转发给客户端。

CORS（后端开启）

• CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。

• CORS 技术需要浏览器和服务器同时支持

• 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10

• 前端开发者什么不都需要做

• 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）

工作原理

服务器端通过 Access-Control-Allow-Origin 响应头，来告诉浏览器当前的 API 接口是否允许跨域请求。

CORS 主要优势

• CORS 是真正的 Ajax 请求，支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式

• 只需要后端开启 CORS 功能即可，前端的代码无须做任何改动

• Node.js中可以通过设置如下的请求头允许跨域,添加到响应之前

  response.setHeader('Access-Control-Allow-Origin', '*')

jsonp（几乎不用，只支持get请求）

jsonp的原理就是利用了script标签会自动发送get请求且非Ajax请求所以不受浏览器同源策略的限制。实现方式就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据当做函数实参和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。

 <button>发送jsonp请求</button>
    <script>
      // src href 会自己发起 get 请求，这不属于 ajax ，所以没有跨域问题
      $('button').click(() => {
        console.log(123)
        $.ajax({
          type: 'GET',
          url: 'http://127.0.0.1',
          dataType: 'jsonp',
          jsonpCallback: 'abc',
          success: function (res) {
            console.log(res)
          },
        })
      })

      // 本地有一个 abc 的函数 等待接收后端数据
      function abc(data) {
        console.log(data)
      }

      abc({
        msg: '数据获取成功！',
        data: [
          {
            name: '西红柿炒蛋',
            price: '18',
          },
          {
            name: '麻辣小龙虾',
            price: '100',
          },
        ],
      })