使用 Nginx 反向代理解决跨域问题 (vue.js 使用代理去掉 vue.js 因为跨域而触发的 options 请求)
我们的项目还是需要 node.js 作为容器的
一 Windows 下安装 Nginx (官网下载稳定版 http://nginx.org/en/download.html)
二修改 config 里的 nginx.conf 文件的 server
- server {
- listen 8899;// 你的端口
- server_name localhost;
- root C:/ZOBSF_F/dist;// 你打包部署的文件路径
- #charset koi8-r;
- #access_log logs/host.access.log main;
- # 匹配 api 路由的反向代理到 API 服务
- location ^~/api {
- proxy_pass http://119.23.227.141:10001/;// 你的后端 IP 和端口
- }
- # 根据路由设置, 避免出现 404
- location / {
- try_files $uri $uri/ @router;
- index index.html;
- }
- location @router {
- rewrite ^.*$ /index.html last;
- }
- #error_page 404 /404.html;
- # redirect server error pages to the static page /50x.html
- #
- error_page 500 502 503 504 /50x.html;
- location = /50x.html {
- root html;
- }
- # proxy the PHP scripts to Apache listening on 127.0.0.1:80
- #
- #location ~ \.php$ {
- # proxy_pass http://127.0.0.1;
- #}
- # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
- #
- #location ~ \.php$ {
- # root html;
- # fastcgi_pass 127.0.0.1:9000;
- # fastcgi_index index.php;
- # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
- # include fastcgi_params;
- #}
- # deny access to .htaccess files, if Apache's document root
- # concurs with nginx's one
- #
- #location ~ /\.ht {
- # deny all;
- #}
- }
三 你的 uve.js 打包的 dist 文件如下
四然后再加一个项目启动配置文件 server.production.js
- var express = require('express');
- var app = express();
- var compression = require('compression');
- var proxyMiddleware = require('http-proxy-middleware') var history = require('connect-history-api-fallback');
- app.use(compression());
- app.use(express.static(__dirname));
- app.middleware = [ // 使用代理 api
- proxyMiddleware(['/api'], {
- target: 'http://192.168.11.103:10001',
- changeOrigin: true,
- pathRewrite: {
- '^/api': '/',
- },
- }), ];
- app.get('*',
- function(req, res) {
- res.sendFile(__dirname + '/index.html');
- });
- app.use(history());
- app.use(app.middleware);
- app.listen('8080',
- function(error) {
- console.info("================== 系统正在启动中...=============================");
- if (error) {
- console.error(error)
- } else {
- console.info("==================9999 系统启动成功!!!=============================")
- }
- });
五然后在项目目录下使用命令 node server.production.js 回车发现包缺少依赖, 使用 npm install [报错提示的依赖组件] 即可 分别有 expresscompressionhttp-proxy-middleware 等
然后启动项目就可以了 访问地址 http://localhost:8080/xxx 即可
六 vue.js 使用代理具体可以百度 (在 config 配置文件里的 inde.js 修改就可了)
- proxyTable: {
- '/api': {
- target: Host.Host,// 设置你调用的接口域名和端口号 别忘了加 http
- changeOrigin: true,
- pathRewrite: {
- '^/api': '/'// 这里理解成用 / api'代替 target 里面的地址, 后面组件中我们掉接口时直接用 api 代替 比如我要调用'http://40.00.100.100:3002/user/add', 直接写 / api/user/add'即可
- }
- }
- },
以上这篇 vue.js 使用代理和使用 Nginx 来解决跨域的问题就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
您可能感兴趣的文章:
详解 vuejs 前后端分离跨域问题
详解 Vue-cli 代理解决跨域问题
详解 Vue 开发模式下跨域问题
来源: http://www.jb51.net/article/134342.htm