• 在工作中遇到各种各样的bug。但是参加工作第一天起，第一次所遇到的bug是一个跨域的问题。

对跨域的这个问题，首先需要了解什么是跨域。大体可以分为三类，协议不同，域名不同，端口不同。

浏览器的同源策略是确保浏览器安全的特别重要的一个安全策略,如果没有同源策略：在一个域上加载的脚本不允许访问另一个域上文本属性 不然通过内嵌 iframe 恶意添加 javaScript 脚本就可以轻松获取到用户信息

何为同源：url 是由协议、域名、端口和路径组成 如果两个路径的协议、域名、端口都相同则表示再同一个域上

在浏览器上

理解了跨域原理，在说说日常项目中，解决跨域的方案

1.JSON跨域

 jsonp的原理就是利用

(1) jquery Ajax实现：

 $.ajax({
   url: 'http://localhost:8080/login',
   type: 'get',
   dataType: 'jsonp',  // 请求方式为jsonp
   data: {}
 });

2.Vue跨域处理

• 利用http-proxy-middleware 代理解决

devServer:{
    proxy:{
       "/api":{
             target:"http://localhost:8080" //数据接口的地址 
             changeOrigin:true,  // 允许跨域 
             secure:false, // 允许运行在https上   
             pathRewrite: { //如果你不想总是传递 /api,可以重写路径
                  '^/api': ''
             }   
        } 
    }

1. 后端使用cors解决跨域问题，这里采用node + express实现

首先安装 npm install cors -S

然后在app.js直接使用即可

app.use(require('cors')())

4.nginx代理跨域

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

通过Nginx配置一个代理服务器域名与aaa相同，端口不同）做跳板机，反向代理访问aaa2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问

#proxy服务器
server {
    listen       80;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://aaa.com;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

以上就是解决跨域最常用见的方法