Vue与API网关前后端分离跨域问题已解

本文介绍如何用Nginx反向代理解决Vue与API网关前后端分离跨域问题。

背景环境：

Vue 前端地址：

http://192.168.56.103:80

API网关服务器接口地址：

http://192.168.56.103:8800

遇到的问题：

从Vue 前端控制台调用API网关地址如下：

http://192.168.56.103/api/v1/user

从Chrome浏览器中查看到的错误请求资源跨域被阻止，如下图：

为什么会遇到跨域问题？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。来个表格，通过对比理解一下：

注意：背景环境使用了不同的端口号，不许通信，遵守同源策略。

什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

解决方法：Nginx反向代理

server {
    listen 80;
    server_name 192.168.56.103;
    location /api {
        proxy_pass http://192.168.56.103:8800;
    }
}