什么是跨域问题
跨域问题是前端开发中比较常见的问题，通常指的是浏览器出于安全策略的考虑，不允许页面从一个域名下向另一个域名发起请求。比如，你的博客页面 http://www.myblog.com 不允许向 http://www.myapi.com 发送请求，这就是一个跨域问题。
解决跨域问题的方法
JSONP
早期的前端开发中，出现了一个解决跨域问题的小技巧：JSONP。JSONP 需要在服务端进行配合。假设要访问 http://www.myapi.com，我们需要在页面中引入一个新的标签：
let script = document.createElement('script');
script.src = 'http://www.myapi.com/api?callback=handleResponse';
document.body.appendChild(script);这里，handleResponse 是我们提前定义好的一个函数，服务端将数据自动封装成这个函数的参数返回。比如，服务端返回的数据如下：
handleResponse({"name": "Tom", "age": 20});此时浏览器会自动调用 handleResponse 函数，并将数据传入该函数。这样的话，我们就直接通过 JavaScript 的跨域方式完成了数据的传输。
CORS
除了 JSONP 之外，CORS 也是一种较为常见的跨域技术。CORS 解决跨域问题需要后端的支持。在服务端，只需要简单的配置就可以解决跨域问题，而前端则只需在原来的基础上增加一个 HTTP 请求头信息：Origin。比如：
fetch('http://www.myapi.com', {
method: 'GET',
headers: { 'Origin': 'http://www.myblog.com' }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在上述代码中，我们的请求头信息中带上了 Origin，表示请求来自于 http://www.myblog.com。而服务端只需要在响应头信息中添加一个 Access-Control-Allow-Origin 字段即可，比如：
Access-Control-Allow-Origin: http://www.myblog.com
这样浏览器就会认为这是一个合法的跨域请求了，从而实现了跨域问题的解决。
总结
跨域问题是每个前端开发人员都可能遇到的问题。解决跨域问题的方式多种多样，我们可以根据实际情况选择最适合自己的方式来解决跨域问题。在实践中，我们要特别注意安全问题，切勿在跨域的请求中传递敏感信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461c18d968c7c53b031ad54