关于前后端分离的跨域问题解决方案

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript实施的安全限制，当一个请求中url的协议、域名、端口与当前页面所在域中的三者中有任何一个不同，都被当作是不同的域。
跨域原理，即是通过各种方式，避开浏览器的安全限制。实际开发中，我们前端服务在一个服务器（端口），接口在另一个服务器（端口）上，这时就会产生跨域。webpack会为我们生成一个开发服务器，当我们请求开发服务器时候，通过代理就可以去请求后台接口。服务器与服务器之间是不存在跨域的说法的。只有浏览器才存在跨域的说法。

1.JSONP:现在这种用的很少了
动态创建一个script标签，只有get请求，有缓存，传递的信息大小有限制等，JSONP是从其他域中加载代码执行，若其他域不安全，会携带一些恶意的代码，有安全隐患；其次，确定JSONP的请求失败不容易。
2.iframe 跨域也比较少
3.代理跨域（前端）+nginx反向代理（后端）
这种在目前在用vue的项目中是用的比较多的，在开发中，前端在vue.config.js中文件中进行配置，具体可查看vue官网。
https://cli.vuejs.org/zh/config/#css-loaderoptions

其实我之前以为跨域前端配置了就可以了，其实只对了一半。若代码打包上线之后，就没有devServer这些东东呢，还是会产生跨域的问题，这时就需要服务端用nginx反向代理（具体细节就要请教后端开发的同学呢）实现。

module.exports = {
  // vue的配置
  devServer: {
    // 针对开发服务器的配置
    proxy: {
      "/api": {
        // 当请求路径以 /api 开头时，开发服务器需要代理到 http://study.work.com
        //若是 /api/user/login  --->，则代理到   http://study.work.com/api/user/login
        target: "http://study.work.com",
      },
    },
  },
};

4.CORS
1.若允许所有的源访问，服务端设置 Access-Control-Allow-Origin 为 “*”，
这时Access-Control-Allow-Credentials为false，否则会报错。
前端无须设置。
2.若要带 cookie 请求，前后端都需要设置。前端需要加一句代码，即允许请求时携带资源凭证。其他设置和正常的axios请求一样。该怎么设置就怎么设置。

 import axios from 'axios'
 // 注意下面这句话一定要加上
 axios.defaults.withCredentials= true;

剩余的工作就是由服务器端去完成了。一般服务器需要指定允许源。
即Access-Control-Allow-Origin :“指定源”， Access-Control-Allow-Credentials:true。