跨域的解决方案

跨域的解决方案

通过服务端代理请求。

    如PHP，服务端语言php是没有跨域限制的。让服务器去别的网站获取内容然后返回页面。

第二种：jsonp跨域

    利用js创建一个script标签，把json的url赋给script的scr属性，把这个script插入到页面里，让浏览器去跨域获取资源。

option{
	url:""
	data:{parms:""},
	cb:""//jsonp接口的回调函数参数名称,
	myCb:""//回调函数名称
	success:function({})
}

function jsonp(option){
            window[option.myCb] = option.success;
            let data = Object.entries(option.data).map(item => item = item.join("=")).join("&");
            let oScript = document.createElement("script");
            oScript.src = `${option.url}?${option.callback}=${option.myCb}&${data}`;
            document.body.appendChild(oScript);
            oScript.onload = function(){
                oScript.remove()
            }  
    }
   

第三种：CORS 跨域资源共享(xhr2)

    CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制整个CORS通信过程，都是浏览器自动完成，不需要用户参与对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。
node.js CORS 跨域资源共享设置

app.all('*', function (req, res, next) {
  // 解决跨域
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-type');
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");
  res.header('Access-Control-Max-Age', 1728000); //预请求缓存20天
  next();
});

第四种：nginx代理跨域

    在nginx服务器中配置代理