一. 什么是跨域?

• 由于浏览器同源策略(协议,域名,端口有任何一个的不同)的限制,访问非同源的数据需要进行跨域处理,如果非同源--有三种行为受到限制:

  • Cookie,LocalStorage无法读取
  • DOM和JS对象无法获得
  • AJAX请求无效(可以发送,但浏览器会拒绝响应)

二. 实现跨域的方式有哪些?

• JSONP
• CORS(服务器端完成)
• 使用反向代理服务器来实现跨域请求(服务器端完成)

三. JSONP

• 实现原理:

  • 动态创建一个script标签
  • 将目标数据的地址放到script标签的src属性中,并在请求地址中拼接callback参数并携带回调函数名
  • 定义回调函数,当数据请求成功之后,回调函数被调用

• JQ封装的ajax方法跨域请求:

  <script>
  $.ajax({
      type: 'GET',
      url: 'http://localhost:4000/jsonp3?callback=?', // ? 可以理解为下面的success方法。
      success: function (data) {
          // data就是服务器返回的数据
          console.log(data);
      },
      dataType: 'jsonp' // 必须要指定dataType为jsonp
  });
  </script>
  
  复制代码

四. CORS

• Cross Origin Resource Share 跨域资源共享(后端完成)

  • 在服务端响应客户端的时候,请求头中带上Access-Control-Allow-Origin", "*"

  // 设置允许跨域访问该服务, cors
  app.all('*', function (req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
      res.header('Access-Control-Allow-Headers', 'Content-Type','mytoken');
      next();
  });
  复制代码