前端跨域

什么是跨域

在前端开发中，跨域指的是浏览器不能执行其他网站的脚本。原因是浏览器出于安全考虑，有同源策略。

同源策略：协议、域名、端口号都相同，才可以共享资源。

跨域解决方案

1. JSONP

JSONP利用了script标签没有跨域限制的特性，通过动态创建script标签，将请求返回的数据作为回调函数的参数传入。

javascript复制代码
function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
  window[callback] = data => {
    delete window[callback];
    document.body.removeChild(script);
    callback(data);
  };
}
jsonp('http://localhost:8080/api', 'callback')

2. CORS

CORS是一种官方的解决跨域问题的方案，支持GET/POST等方法。

开启CORS需要在服务端设置Response Header:

复制代码
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

这样就可以让请求源访问到资源了。

3. nginx反向代理

nginx是一个高性能的HTTP服务器和反向代理服务器，在实现反向代理时可以实现跨域。

在nginx.conf配置文件中，添加以下内容：

复制代码
location /api {
  proxy_pass http://localhost:8080;
  add_header Access-Control-Allow-Origin *;
}

这样就可以在前端访问localhost:80/api，nginx会将请求转发到localhost:8080，并在Response Header中添加Access-Control-Allow-Origin。

总结

跨域问题在前端开发中是一个常见的问题，了解跨域的原因和解决方案对于前端工程师来说非常重要。常用的跨域解决方案有JSONP、CORS和nginx反向代理，需要根据实际情况选择合适的方案来解决跨域问题。