跨域 [前端Vue & 后端 & nginx]方法整理

前后端交互 跨域 解决

浏览器的同源策略

两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。

浏览器的同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

如何允许跨源访问

可以使用 CORS 来允许跨源访问。CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。

具体实现方法

在前后端分离项目，具体实现整理了三种方式，分别是通过前端、后端、NGINX三个方向去实现。

1. 前端跨域实现

1.1 通过jsonp

1.2 可跨域的标签，具体见文章尾《附1》

1.3 vue项目 + axios

实现方法：

通过增加proxyTable代理配置。

在config/index.js 中增加：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
        target: 'http://*.*.*.*:8084',
        changeOrigin: true,
        pathRewrite:{
          '^/': ''
        }
      }
    },
  }
 }

注意：

在axios 配置中不可以给baseUrl增加默认值，否则不走上面的代理。

class HttpRequest {
  constructor (baseUrl = '') {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig () {
    const config = {
      baseURL: '',
      timeout: 60000,
    }
    return config
  }
}

2.后端实现

2.1 通过setHeader

response.setHeader("Access-Control-Allow-Origin", "*");

2.2 通过注解@CrossOrigin

@CrossOrigin(allowCredentials = "true")

3.Nginx 实现

	location / {
            proxy_pass http://***;
            proxy_set_header Host $host; 
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

主要依赖这几句命令进行跨域。
命令解释参考：

proxy_set_header X-real-ip $remote_addr;

其中这个X-real-ip是一个自定义的变量名，名字可以随意取，这样做完之后，用户的真实ip就被放在X-real-ip这个变量里了，然后，在web端可以这样获取：
request.getHeader("X-real-ip")

proxy_set_header X-Forwarded-For $remote_addr;

同上。
真实的显示出客户端原始ip。（nginx更多使用这条配置，X-Forwarded-For为默认字段，以下介绍均为默认字段）

附：

附1. 跨源网络访问资源的标签

标签嵌入跨域脚本。语法错误信息只能被同源脚本中捕捉到。
2. 标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的 HTTP 头部 Content-Type 。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
3. 通过 展示的图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,…
4. 通过 和 播放的多媒体资源。
5. 通过 、 和 嵌入的插件。
6. 通过 @font-face 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
7. 通过 载入的任何资源。站点可以使用 X-Frame-Options 消息头来阻止这种形式的跨域交>互。