【跨域】浅谈一下跨域

跨域是由浏览器的同源策略导致的不允许当前页面访问另一个源的数据。当两个网页的协议，端口和域名一致时才叫同源，三者有任一不一致就叫跨域。

ps;同源策略可以帮助阻隔恶意文档，减少可能被攻击的媒介。提高安全性。

打开config/index.js，在proxyTable中添加如下代码

proxyTable: {
  '/api': {   //使用‘/api’来代替‘源地址’
     target: 'www.baidu.com', //我们要代理的地址
     changeOrigin:true, //是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
     //路径重写
     pathRewrite:{
     //重新路由
     '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
  }
},

• 前端设置
  前端vue设置axios允许跨域携带cookie：axios.defaults.withCredentials = true;
• 后端设置
  1.Access-Control-Allow-Credentials 为 true
  2.Access-Control-Allow-Origin为非 *

当我们在开发环境中完成项目后，需要在生产环境中运行时，我们就需要借助Nginx的反向代理来进行跨域

server{
    # 监听9099端口
    listen 9099;
    # 本地的域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://baidu.com
    location ^~ /api {
        proxy_pass http://baidu.com;
    }    
}

ps：需要注意的是 Nginx的操作一般是由运维人员完成，需要前端人员进行操作，我们只做简单的了解

更多的正向代理和反向代理知识可以阅读这篇文章

https://www.cnblogs.com/ysocean/p/9392908.html

跨域的根本原因就是浏览器的同源策略，我们可以设置一个跨域浏览器，关掉浏览器的同源策略。专门用来调试代码。

windows浏览器可以

找到你安装的目录
.GoogleChromeApplicationchrome.exe --disable-web-security --user-data-dir=xxxx

来设置

mac浏览器

~/Downloads/chrome-data 这个目录可以自定义.

/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary  --disable-web-security --user-data-dir=~/Downloads/chrome-data