前端跨域问题解决方案

前言

1.跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
2.同源策略,是浏览器对 JavaScript实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
3.跨域原理，即是通过各种方式，避开浏览器的安全限制。

1.xampp跨域解决

最开始出现跨域，对于前端工程师来说，解决跨域属于一大难题，因为前后端需要工作，需要使用同一种编辑器，最后部署到web服务器上。
对于当时的前端工作者来说，要他们使用后端的编辑器还有点难度，因此出现了xampp。

XAMPP是由Apache、MySQL、PHP、PERL等功能模块构成的一个功能强大的集成软件包，主要用于方便用户快速开发和搭建属于自己的网站。

通过xampp，前端工作者可以通过修改本地的host文件来模拟同源问题。但是这种方法本质上也是一直同源策略。

2.JSONP解决跨域

其原理是根据script标签的src属性可以访问跨域的js脚本，其过程如下：

注意：JSONP发送请求的缺点：只能发送get请求；需要服务器端配合返回指定格式的数据。
原因：script中的属性，都叫资源文件请求，所谓的资源文件请求都是get请求

3.CORS跨域资源共享

服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求。

客户端：（发送ajax/fetch请求）

axios.defaults.baseURL = 'http://127.0.0.1:8888' ;axios.defaults.withcredentials = true;
axios.defaults.headers [ 'content-Type '] = 'application/×-www-form-urlencoded ' ;
axios.defaults.transformRequest = function (data);
   if ( !data) return data;
   let result = ``;
   for ( let attr in data) {
    if ( !data.hasOwnProperty( attr)) break;
    result +=`&${attr}=${data[attr]} ;
  }
   return result.substring(1);
  };
axios.interceptors.response.use(function onFulfilled(response)
{
   return response.data;
}, function onRejected( reason) {
  return Promise.reject( reason) ;
});
axios.defaults.validatestatus = function (status) {
   return /^(2|3)\d{2}$/.test(status);

服务器：需要设置相关的响应头信息，（处理options试探性请求）

app.use( ( req,res, next) =>{
     res.header( "Access-control-Allow-origin","http: / /localhost:8000");
     res.header
    ( "Access-control-Allow-Credentials", true ) ;
    res.header( "Access-control-Allow-Headers","content-Type,content-Length,Authorization,Accept,x-Requested-with");
    res.header( "Access-control-Allow-Methods","PUT,POST,GET,DELETE,HEAD,OPTIONS");
    if (req.method === 'OPTIONS') {
       res.send( 'oK ! ');
       return;
    }
    next();
});

虽然CORS跨域资源问题可以解决不同的"PUT,POST,GET,DELETE,HEAD,OPTIONS"等请求，但是他也存在一个缺点：我们的服务器端需要设置一个源，这个源可以写*(具体地址)，此处的*表示可以携带多个源，表示支持多源，就不能再允许携带cookie了（因为设置了多源，浏览器为了保证cookie的安全，所以设置为不允许携带）。

4.http proxy

这种方式真实开发中比较常用，但是需要webpack和webpack-dev-server的支持。
通过本地服务器向proxy代理发送请求，proxy代理收到请求，转换为与目标地址相同的ip和端口，向目标地址发送请求。

proxy: {
     '/': {
          'target': 'http://178.192.13.284:9060',//目标URL
          'changeOrigin': true
          },
}

5.nginx反向代理——前端不需要配置

结束语

以上就是几种常用的解决跨域问题的方案了，有什么需要补充的欢迎小伙伴在下面评论。