常见跨域

因为浏览器出于安全考虑，有了同源策略,这样就导致只要协议、域名、端口有任何一个不同，都被当作是不同的域。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求就会失败。

JSONP

就是利用 <script> 标签没有跨域限制的漏洞。通过 <script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。但是只限于 get 请求。

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>
    function jsonp(data) {
        console.log(data)
    }
</script>



function jsonp(url, jsonpCallback, success) {
  let script = document.createElement('script')
  script.src = url
  script.async = true
  script.type = 'text/javascript'
  window[jsonpCallback] = function(data) {
    success && success(data)
  }
  document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
  console.log(value)
})


$.ajax({
    url: "http://localhost:9090/student",
    type: "GET",
    dataType: "jsonp", //指定服务器返回的数据类型
    success: function (data) {
      var result = JSON.stringify(data); //json对象转成字符串
      $("#text").val(result);
    }
});

CORS

CORS（Cross-Origin ResourceSharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

vue中做反向代理