专栏首页call_me_Rnginx处理跨域

nginx处理跨域

为什么要抛出这个话题?

最近从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 K
nginx.exe                     3052 Console                    1      7,508 K

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

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

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

跨域问题

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

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>nginx</title>
</head>
<body>
    <h1>nginx反向代理</h1>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:8887');
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log(xhr.responseText)
                }
            }
        }
    </script>
</body>
</html>
复制代码

我开启了第一个服务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个文件的代码,如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>nginx</title>
</head>
<body>
    <h1>nginx反向代理</h1>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/api');
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log(xhr.responseText)
                }
            }
        }
    </script>
</body>
</html>
复制代码

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就更好了?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Egg.js试水 - 文章增删改查【前后端分离】

    上一篇文章讲的是后端渲染的项目 - Egg.js 试水 - 天气预报。但是没有引入数据库。这次的试水项目是文章的增删改查,将数据库引进,并且实现前后端分离。

    嘉明
  • 【译】JavaScript中的Promises

    你有没有在JavaScript中遇到过promises并想知道它们是什么?它们为什么会被称为promises呢?它们是否和你以任何方式对另一个人做出的承诺有关呢...

    嘉明
  • 【译】JavaScript中的call,apply,bind

    在我们开始研究call, apply, bind之前,应该对how does "this" keyword works in JavaScript有所认知。

    嘉明
  • Nginx入门学习

    nginx 是HTTP和反向代理服务器,邮件代理服务器和通用TCP/UDP代理服务器。总之一句话,nginx很火很牛逼就对了。

    Johnson木木
  • LVS + keepalived + nginx + tomcat 实现主从热备 + 负载均衡

      首先声明下,由于这两天找资料,看了不少博客 ,但是出于不细心,参考者的博客地址没有记录下来,所有文中要是出现了与大家博客相同的地方,那么请大家在评论区说明并...

  • Nginx安装及配置(二)

    帮助文档:http://nginx.org/en/docs/ngx_core_module.html

    咻一咻
  • Nginx编译安装

    ​ nginx 日志文件分为 log_format 和 access_log 两部分

    Cyylog
  • 腾讯云Centos安装nginx

    使用的是腾讯云主机,选择的镜像如下: Centos7+ 64bit; nginx 1.7.12

    河岸飞流
  • 为你的网站加上SSL,可以使用HTTPS进行访问

    苹果在之前就说了,api接口得用https,不然不给上架,这是对于我来说无所谓,毕竟我们就是一个网站嘛~ 有没有s无所谓,但是我们要追求极高的造诣,那么加个s装...

    风间影月
  • 在lnmp环境中的nginx编译安装

    如果linux系统没有预先安装 gcc 等编译软件可以用yum源安装。安装nginx,首先需要安装依赖模块pcre、zlib、openssl。

    砸漏

扫码关注云+社区

领取腾讯云代金券