跨域问题的产生

首先，需要了解浏览器同源策略，啥是同源策略？
协议、域名、端口号有一个不同，就是违反同源策略，就会报跨域错误
其实发送请求是可以正常发送的，服务器收到也没问题，会返回，但是到浏览器端，就会报错误，为啥？
因为这个跨域限制是浏览器端才有的

如何解决跨域问题

JSONP

html有一些元素是不会受到跨域的限制的，比如说 script、img、link

JSONP利用script，加个callback，通过callback函数获取返回的数据，面试常问：手写个jsonp，相当于是传过去了cbName的函数，在服务端进行调用，但是注意jsonp有一个巨大的缺点，只支持GET方法

const jsonp = (url, params, cbName) => {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        window[cbName] = (data) => {
            resolve(data);
            document.body.removeChild(script);
        }
        params = {...params, callback: cbName};
        const arr = Object.keys(params).map(key => `${key}=${params[key]}`);
        script.src = `${url}?${arr.join('&')}`;
        document.body.appendChild(script);
    })
}

CORS

一般是由后端来开启的都需要设置啥

"Access-Control-Allow-Origin": "允许的所有域名",
"Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
"Access-Control-Allow-Headers" : "Content-Type"

小熊前端-跨域问题，面试常考

跨域问题的产生

如何解决跨域问题

JSONP

CORS

代理