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 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
Javascript 面向对象 继承
May 13 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
$("").click与onclick的区别示例介绍
Sep 25 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 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之PHP语法学习笔记1
2006/12/17 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
Python中取整的几种方法小结
2017/01/06 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript