跨域详解在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是

前言

跨域种类

1、ajax跨域；
2、cookie跨域；
3、iframe跨域；
4、localStorage跨域；

ajax跨域

ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”；

跨域请求

$.ajax({
            type: 'get',
            url: 'https://movie.douban.com/j/search_tags?type=tv&source=index',
            success: function(msg) {
                console.log(msg);
            },
            error: function(msg) {
                console.log(msg);
            }
        })

跨域报错

解决办法：

1、jsonp的形式解决
原理：
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。jsonp就是这个原理，创建script标签。因此jsonp只能够处理get的跨域请求。

 this.$.ajax({
        type: "get",
        url:
          "https://movie.douban.com/j/search_tags?type=tv&source=index?callback=jsonpCallback",
        // data: '',
        dataType: "jsonp",
        crossDomain: true,
        success: function(msg) {
          console.log(msg);
        },
        error: function(msg) {
          console.log(msg);
        },
        jsonpCallback: function(msg) {
          console.log(msg);
        }
      });

2、webpack proxy的形式
原理：
proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器。例如：本地主机A为http://localhost:3000，该主机浏览器发送一个请求，接口为/api，这个请求的数据（响应）在另外一台服务器B http://yunzhi.com:80上，这时，就可以通过A主机设置webpack proxy，直接将请求发送给B主机。proxy支持get请求和post请求

 proxyTable: {
            '/api': {
                target: "http://172.20.49.106:3000/jsonp", //开发环境
                changeOrigin: true,
                pathRewrite: {
                    '^/api': 'api'
                }
            },
        },

3、cors
服务端设置CORS可参考：juejin.cn/post/684490…
1. 反向代理服务器（Nginx等）
1. 后端程序接口代理