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,并解决前端跨域问题的更多相关文章

  1. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  2. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  3. 完美解决前端跨域之 easyXDM 的使用和解析

    前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...

  4. JAVA解决前端跨域问题。

    什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...

  5. 如何用Nginx解决前端跨域问题?

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...

  6. 【Nginx】在Windows下使用Nginx解决前端跨域问题

    提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...

  7. 用nginx的反向代理机制解决前端跨域问题

    什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制 ...

  8. nginx反向代理-解决前端跨域问题

    1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...

  9. 利用nginx做反向代理解决前端跨域问题

    最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但 ...

  10. ngnix 反向代理来解决前端跨域问题

    1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...

随机推荐

  1. Symfony2在Nginx下的配置方法图文教程

    来源: https://www.xp.cn/b.php/79706.html Symfony2在Nginx下的配置方法图文教程 本文详细讲述了Symfony2在Nginx下的配置方法.分享给大家供大家 ...

  2. zk单机集群安装

    参考:https://www.cnblogs.com/leeSmall/p/9563547.html zk单机集群安装 cd /usr/local 下载 wget http://mirror.bit. ...

  3. 日常开发记录-Object函数的内置方法Object.entries

    方法1: const data = { id: 1, name: "张三", age: 22 } let params = "" /* Object.entri ...

  4. Vue 使用Lodop进行标签(条码)打印

    一.使用到的插件:vue-barcode(vue条形码插件),Lodop打印控件(我这里使用windows64版,所以以此进行举例说明.). 详述:前者(指vue-barcode)针对在前端界面上观察 ...

  5. noi 2.1 1978 生理周期

    noi 1978 生理周期 1.描述 人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色.例如, ...

  6. ubuntu系统中NTP服务配置

    首先进行软件的安装:sudo apt-get install ntp sudo apt-get install ntpdate(手动校时软件) 然后修改ntp配置文件:sudo vim /etc/nt ...

  7. ubuntu-wireshark打开出现错误的问题

    The capture session could not be initiated on interface 'enp2s0' (You don't have permission to captu ...

  8. python装饰器中高级用法(函数加参)

    在上一章我们说到装饰器的原则和基本用法,下面来补充一下:如果函数加参,装饰器该如何变化 1,还是用上一章的源代码 2,给test2加个参数name 报错了,本来给test2加一个name参数,为了实现 ...

  9. 【1】java之类与对象

    一.前言 面向对象就是一种组件化的设计思想. 面向对象特性 封装性:保护内部的定义结构安全性: 继承性:在已有的程序结构上继续扩充新的功能: 多态性:在某一个概念范围内的满足. 二.类与对象的定义和使 ...

  10. Echarts中国地图下钻

    //各省份的地图json文件 var provinces = { '上海': '/asset/get/s/data-1482909900836-H1BC_1WHg.json', '河北': '/ass ...