博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nginx处理跨域
阅读量:5158 次
发布时间:2019-06-13

本文共 2340 字,大约阅读时间需要 7 分钟。

为什么要抛出这个话题?

最近从mac转成用window来开发,在安装nginx的时候碰了下钉子,那我就不开心了。想着既然都安装好了,那么就搞点事情吧~

window上安装nginx

简单讲下在window上安装nginx~

下载软件并安装

  • 通过下载你需要的版本,我这里下载了稳定版本

  • 直接解压此文件即可

基本操作

进入解压的文件夹(nginx.exe)的上一级。

  • 启动:nginx
    • 启动之后就可以在localhost:80访问你的项目了,前提是你的80端口没有被占用
  • 停止
    • 快速停止:nginx -s stop
    • 优雅停止:nginx -s quit
  • 重新加载:nginx -s reload
    • 使用情况-更改配置;开启一个新的工作进程;优雅关闭了旧的工作进程想重新启动
  • 重新打开:nginx -s reopen
    • 重新打开日志文件

注意事项

在出现pid被占用的情况,你可以通过下面的方法处理:

  1. 在任务管理器中手动移除nginx占用的进程

  2. 执行tasklist /fi "imagename eq nginx.exe"找出nginx占用的进程

映像名称                       PID 会话名              会话#       内存使用========================= ======== ================ =========== ============nginx.exe                     8248 Console                    1      7,076 Knginx.exe                     3052 Console                    1      7,508 K复制代码

之后kill相关的进程就行了。

注意:有时候移除了占用的PID后还是不行,那重启下电脑~

启动nginx后,在浏览器上输入localhost你会看到其成功启动的页面,如下图:

跨域问题

对于跨域的概念就不详细说了...

我们先关闭nginx代理,然后开启两个node服务来进行验证,刚开始的时候,我是这样处理的:

    
nginx

nginx反向代理

复制代码

我开启了第一个服务server.js

const http = require('http');const fs = require('fs');http.createServer(function(request, response) {    const html = fs.readFileSync('index.html', 'utf8');    response.writeHead(200, {        'Content-Type': 'text/html'    });    response.end(html);}).listen(8888);console.log('server is listening at 8888 port');复制代码

好,我开启第二个服务来提供数据源server2.js

const http = require('http');http.createServer(function(request, response) {    response.writeHead(200, {        'Content-Type' : 'application/json;charset=utf-8'    });    let data = {        name: 'nginx proxy'    };    data = JSON.stringify(data);    response.end(data);}).listen(8887);console.log('server2 is listen at 8887 port');复制代码

可是由于浏览器的同源策略,我没能请求到数据~

我的另外一个开启的服务是有数据的:

来,nginx派上用场了,我修改下上面html个文件的代码,如下:

    
nginx

nginx反向代理

复制代码

nginx代理

来,我们修改下nginx.conf文件,如下:

http {    server {        ...        location / {            root   html;            index  index.html index.htm;        }        # 加入的内容        location /app/ {            proxy_pass http://localhost:8888/;        }        # 加入的内容        location /api/ {            proxy_pass http://localhost:8887/;        }    }}复制代码

然后开启我们的nginx服务之后,就重启server.jsserver2.js服务。之后在浏览器上打开localhost/app/就在console上看到请求过来的数据了~

参考和后话

更多的内容,请戳进行了解,能留个star就更好了?

转载于:https://juejin.im/post/5d4a4c67f265da03cf7a7729

你可能感兴趣的文章
Android微信SDK API 调用教程【转】
查看>>
Android开发优化之——对Bitmap的内存优化
查看>>
最近的工作感悟
查看>>
JAVA数据类型
查看>>
在ASP.NET MVC中如何预防Cookie的窃取攻击(转载)
查看>>
EL表达式
查看>>
jaeger 使用初探
查看>>
IOS成长之路-Nsstring搜索方法rangeOfString
查看>>
为什么macos开机黑屏但是有声音?
查看>>
现在的心情
查看>>
Python-列表练习
查看>>
Python selenium —— 一定要会用selenium的等待,三种等待方式解读
查看>>
怎样group by一列 select多列
查看>>
Educational Codeforces Round 42 C. Make a Square(字符串操作)
查看>>
JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么?...
查看>>
noip模拟赛 洗衣
查看>>
省选模拟赛 礼
查看>>
HDU1698+线段树
查看>>
ASP.NET没有魔法——ASP.NET MVC 与数据库之EntityFramework配置与连接字符串
查看>>
C#进阶系列——WebApi 传参详解
查看>>