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页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...
随机推荐
- Symfony2在Nginx下的配置方法图文教程
来源: https://www.xp.cn/b.php/79706.html Symfony2在Nginx下的配置方法图文教程 本文详细讲述了Symfony2在Nginx下的配置方法.分享给大家供大家 ...
- zk单机集群安装
参考:https://www.cnblogs.com/leeSmall/p/9563547.html zk单机集群安装 cd /usr/local 下载 wget http://mirror.bit. ...
- 日常开发记录-Object函数的内置方法Object.entries
方法1: const data = { id: 1, name: "张三", age: 22 } let params = "" /* Object.entri ...
- Vue 使用Lodop进行标签(条码)打印
一.使用到的插件:vue-barcode(vue条形码插件),Lodop打印控件(我这里使用windows64版,所以以此进行举例说明.). 详述:前者(指vue-barcode)针对在前端界面上观察 ...
- noi 2.1 1978 生理周期
noi 1978 生理周期 1.描述 人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色.例如, ...
- ubuntu系统中NTP服务配置
首先进行软件的安装:sudo apt-get install ntp sudo apt-get install ntpdate(手动校时软件) 然后修改ntp配置文件:sudo vim /etc/nt ...
- ubuntu-wireshark打开出现错误的问题
The capture session could not be initiated on interface 'enp2s0' (You don't have permission to captu ...
- python装饰器中高级用法(函数加参)
在上一章我们说到装饰器的原则和基本用法,下面来补充一下:如果函数加参,装饰器该如何变化 1,还是用上一章的源代码 2,给test2加个参数name 报错了,本来给test2加一个name参数,为了实现 ...
- 【1】java之类与对象
一.前言 面向对象就是一种组件化的设计思想. 面向对象特性 封装性:保护内部的定义结构安全性: 继承性:在已有的程序结构上继续扩充新的功能: 多态性:在某一个概念范围内的满足. 二.类与对象的定义和使 ...
- Echarts中国地图下钻
//各省份的地图json文件 var provinces = { '上海': '/asset/get/s/data-1482909900836-H1BC_1WHg.json', '河北': '/ass ...