nginx 代理 vue 项目服务器接口

2018-01-18

vue 使用 ajax 与后端交互时，需要连接 api，与传统的 ajax 不一样，要想在 vue 项目中使用 ajax 请求，必须要有 vue-resource，安装命令如下：

1	npm install vue-resource --save

在 main.js 中加入以下语句

1 2	import VueResource from 'vue-resource' Vue.use(VueResource)

接下来就使用 vue-resource 封装的方法去请求，以下给的是一个 GET 的请求例子
假设你要请求的是非本地的服务器数据，某个请求接口地址为 http://fuwuqi/login/ ，后面 params 接的是参数，请求的方式为如下：

this.$http.get('http://fuwuqi/login/', {params: {username: username}})
	.then(response => {
	  // 这里是成功之后的处理
	}, response => {
	  // 这里是失败之后的处理
	})

但是，大家会发现出错了，根据提示 Access-Control-Allow-Origin ，我们发现这是一个跨域的问题，解决的方案是做代理处理。利用一个本地服务器的环境，此处以 nginx 为例，修改 nginx 的配置代理远程服务器。 http://127.0.0.1:8081/ 是 vue 项目运行的地址，指定 /new/ 之后，就可以通过 localhost:8080/new/ 来访问 vue 的项目（nginx的端口号是8080）。

location /new/ {
    proxy_pass http://127.0.0.1:8081/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 43200000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_buffering off;
}

另外，还需要同样配置不同访问地址来指定服务器的地址。

location /api/ {
    proxy_pass http://fuwuqi/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 43200000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_buffering off;
}

到了这一步，我们就可以通过 /api/ 代替远程服务器的地址，连接接口，修改上面请求的代码如下：

this.$http.get('/api/login/', {params: {username: username}})
	.then(response => {
	  // 这里是成功之后的处理
	}, response => {
	  // 这里是失败之后的处理
	})

到了这一步基本就没什么问题了。
如果修改了 nginx 的配置后，通过访问 nginx 的地址（如 localhost:8080/new/）显示空白页，并出现提示 app.js 有误，如下图：

实际上是因为在编译项目的时候，路径出现了问题，把 vue 项目中的 config/index.js 修改以下代码，就是把 assetsPublicPath 的 ‘/‘ 去掉，然后 npm run dev 重启 vue 项目就能读到项目的文件了，具体原因，有待研究。

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    proxyTable: {},

我遇到的另一个问题就是，没有了跨域问题，但是一直返回 400 错误，最后发现是 api 连接路径还不完全正确，就是后面的 ‘/api/login/‘ 我漏了最后面的反斜杠，所以有时候，细节很重要，一点点差异都有可能导致失败。

附上 HTTP 的参考文档
https://github.com/pagekit/vue-resource/blob/HEAD/docs/http.md

| 阅读量()