window安装nginx,并解决前端跨域问题
window 安装 nginx 流程
第一步:下载nginx
http://nginx.org/en/download.html

第二步:下载完成后,解压到指定目录文件,启动nginx
进入nginx根目录,双击nginx.exe,一个弹框一闪而过,nginx服务启动。

或者打开命令行工具,进入nginx根目录下,输入命令:start nginx 也可以启动。
此时在浏览器输入:localhost:80,就可以看到nginx欢迎页面

第三步:开始设置前端调用后台接口的跨域配置
用编辑器打开nginx文件,找到文件下的nginx.conf文件

再打开的nginx.conf代码下,找到server开始配置如下:

server {
listen 8888; //启动端口号
server_name 127.0.0.1 localhost 10.20.136.189; //自己电脑的ip地址,可以配置多个。
location / { proxy_pass http://localhost:8080; // 配置监听前端启动的浏览地址 }
#配置前端调用的接口反向代理
location ^~ /api/ {
rewrite ^/api/(.*)$/$1 break; //监听所有以api开头的接口地址
proxy_pass https://api.devland.cn/; //后端接口地址
proxy_set_header Host api.devland.cn;
}
}
前端项目调用接口地址时前边需要加 /api/
如:axios.post('/api/goods/details')
至此前端调用接口跨域问题完美解决
windows nginx常用命令
启动nginx服务:start nginx
修改配置后重新加载生效 : nginx -s reload
重新打开日志文件 :nginx -s reopen 测试nginx配置文件是否正确 : nginx -t -c /path/to/nginx.conf
验证配置是否正确 : nginx -t
查看Nginx的版本号:nginx -V
启动Nginx:start nginx
快速停止或关闭Nginx:nginx -s stop
正常停止或关闭Nginx:nginx -s quit
配置文件修改重装载命令:nginx -s reload
window安装nginx,并解决前端跨域问题的更多相关文章
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...
- 完美解决前端跨域之 easyXDM 的使用和解析
前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...
- JAVA解决前端跨域问题。
什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...
- 如何用Nginx解决前端跨域问题?
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...
- 【Nginx】在Windows下使用Nginx解决前端跨域问题
提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...
- 用nginx的反向代理机制解决前端跨域问题
什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制 ...
- nginx反向代理-解决前端跨域问题
1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...
- 利用nginx做反向代理解决前端跨域问题
最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但 ...
- ngnix 反向代理来解决前端跨域问题
1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...
随机推荐
- H5网页CAD中webpack使用详细说明
前言 webpack是用于现代 JavaScript 应用程序的静态模块打包工具,用以构建一个前端工程化项目,如vue-cli create-react-app等脚手架工具都是基于webpack的构建 ...
- 电脑cmd命令
查看ip ipconfig/all
- Java基础__04.GUI编程
GUI编程常见的组件: 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标操作 键盘事件 GUI简介 GUI的核心技术:Swing AWT,是需要jre环境的. AWT介绍 包含了很多类和接 ...
- ADC相关内容
SFDR定义 无杂散动态范围(Spurious Free Dynamic range ,SFDR) 是衡量A/D和D/A数据转换器(ADC/DAC)的指标,表示在杂散分量干扰基本信号或导致基本信号失真 ...
- (K8s学习笔记五)Pod的使用详解
1.Pod用法 K8s里使用的容器不能使用启动命令是后台执行程序,如:nohup ./start.sh &,该脚本运行完成后kubelet会认为该Pod执行结束,将立刻销毁该Pod,如果该Po ...
- windows11上面打开HEIC文件的有效方法
今天在传资料的时候,用手机拍了一张照片传到window11,打开时竟然无法打开,顿时有点诧异,仔细看了文件类型(HEIC),可能软件不识别,怎么解决呢? 经过搜索整理尝试了许多方法,没找到一个合适的. ...
- python logging模块学习
logging 是对程序运行中的日志进行输出记录,用户在程序中设置在哪个地方输出什么信息,方便进行之后问题的排查. logging输出有两种方式:输出至控制台 . 输出至文件 输出至控制台: impo ...
- wamp+phpstrom+Xdebuge helper(google)
一.软件安装两个软件的安装和第三个浏览器插件就不再赘述,网上有很多详细的教程,自行百度. 二.配置步骤1.wampwamp的优势在于自带xdebuge的dll文件,所以不需要在官网根据版本下载,具体位 ...
- HTML基础知道了解
第1章 Html介绍 1.Html和CSS的关系 1.1 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1.2 HT ...
- el-table实现翻页选择和回看
html <el-table ... <!-- row-key的row.id是你的行唯一标识,一般用id,翻页选的关键 --> :row-key="row => ro ...