vue.js使用代理和使用Nginx来解决跨域的问题


Posted in Javascript onFebruary 03, 2018

使用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文件如下

vue.js使用代理和使用Nginx来解决跨域的问题

四、然后再加一个项目启动配置文件 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 [报错提示的依赖组件] 即可 分别有express、compression、http-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来解决跨域的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 #Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 #Javascript
JavaScript实现求最大公共子串的方法
Feb 03 #Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 #Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 #Javascript
JS删除数组里的某个元素方法
Feb 03 #Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
You might like
php下使用无限生命期Session的方法
2007/03/16 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
python中黄金分割法实现方法
2015/05/06 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python3 logging日志封装实例
2020/04/08 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
二年级语文教学反思
2014/02/02 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
监护人证明
2015/06/19 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python