Nginx反向代理node，实现让静态文件在同一域

原文https://github.com/zhuangZhou/Blog/issues/4

不管是Vue还是React，还是传统的网站，与node服务端连接都需要实现跨域；这样的做法都很麻烦，所以就想让静态文件和node的服务器在同一域下，这样就不需要跨域了；（当然专业的运维做这个是分分钟的事）

搭建node服务器

1、下载安装包

  • koa
  • koa-router

我们这里使用koa2来搭建服务器，来通过koa-router实现后端路由，提供接口；具体初始化文件夹什么的，这里就不阐述了；

2、创建app.js

const koa = require('koa');

const Router = require('koa-router');

const app = new koa();

const router = new Router();

router.get('/api/index',async(ctx,next) => {

    ctx.status = 200;

    ctx.body = {

        data:1

    }

});

app.use(router.routes());

app.use(router.allowedMethods());

app.listen(3000,()=>{

    console.log('连接成功!')

})

搭建一个端口为3000，使用koa-router实现一个get请求为/api/index，返回一个json数据；

创建一个能够请求的index.html

<!DOCTYPE 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>Document</title>

</head>

<body>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>

        $(function(){

            $.get('/api/index',function(res){

                console.log(res);

            },'json')

        })

    </script>

</body>

</html>

这里通过CDN因为JQuery，使用Ajax请求上面node服务器创建的/api/index接口；

配置Nginx

server {

    liseten 80;

    server_name localhost;

    location / {

        root www;

        index index.html;

    }

    location /api/ {

        proxy_pass http://127.0.0.1:3000;

    }

}

上面是Nginx的一些基本配置，网上教程很多，就不做赘述了；这里主要是记录Nginx怎么将两个路径的资源，放在同一域下；

这里配置

location /api/

的意思是当服务器请求地址的首部为/api/时，将代理到下面的路径；

Nginx反向代理node，实现让静态文件在同一域的更多相关文章

  1. nginx反向代理node.js获取客户端IP

    使用Nginx做node.js程序的反向代理,会有这么一个问题:在程序中获取的客户端IP永远是127.0.0.1 如果想要拿到真实的客户端IP改怎么办呢? 一.首先配置Nginx的反向代理 proxy ...

  2. CentOS 7 安装 Nginx 反向代理 node

    安装 nginx yum install epel-release yum install nginx 配置 nginx sudo vim /etc/nginx/nginx.conf, 改成下面配置: ...

  3. 用Nginx反向代理Node.js

    安装pm2 npm install pm2 -g ln -s /home/download/node-v8.11.1-linux-x64/lib/node_modules/pm2/bin/pm2 /u ...

  4. CORS跨域与Nginx反向代理跨域优劣对比

    最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主 ...

  5. node项目发布+域名及其二级域名配置+nginx反向代理+pm2

    学习node的时候也写了一些demo.但是只是限于本地测试,从来没有发布.今天尝试发布项目. 需要准备的东西 node 项目:为了突出重点,说明主要问题.我只是拿express 写了很简单的demo. ...

  6. Nginx反向代理Tomcat静态资源无法加载以及请求链接错误

     在使用Nginx实现Tomcat的负载均衡的时候,项目发布到了Tomcat,Nginx也配置好了, 当访问的时候发现了与预期不符 表现为: 静态资源加载失败 链接跳转地址错误 下面是我错误的配置文件 ...

  7. Nginx反向代理上传大文件报错（failed to load resource : net :: ERR_CONNECTION_RESET）

    转自: https://blog.csdn.net/kinginblue/article/details/50753271?locationNum=14&fps=1 Nginx反向代理上传大文 ...

  8. nginx反向代理部署springboot项目报404无法加载静态资源

    问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...

  9. Nginx反向代理以及负载均衡配置

    项目地址:http://git.oschina.net/miki-long/nginx 前提:最近在研究nginx的用法,在windows上小试了一下,由于windows下不支持nginx缓存配置,所 ...

随机推荐

  1. 书评第003篇：《0day安全：软件漏洞分析技术（第2版）》

    本书基本信息 丛书名:安全技术大系 作者:王清(主编),张东辉.周浩.王继刚.赵双(编著) 出版社:电子工业出版社 出版时间:2011-6-1 ISBN:9787121133961 版次:1 页数:7 ...

  2. Spring AOP监控SQL运行

    对数据库连接池Proxool比較熟悉的读者,都知道Proxool能够记录SQL运行内容和时间等信息日志. 我们能够将该日志记录专门的SQL日志文件.对于查找运行特别耗时的SQL起了不小的作用. 对于一 ...

  3. chrome浏览器世界之窗浏览器的收藏夹在哪？

    今天心血来潮,用一个查重软件删除重复文件,结果把chrome浏览器和世界之窗浏览器的收藏夹给删除了,导致我保存的好多网页都没有了,在浏览器本身和网上都没有找到这两个浏览器默认的收藏夹在哪个位置,只好用 ...

  4. Koa2学习（五）中间件

    Koa2学习(五)中间件 Koa2通过app.use(function)方法来注册中间件. 所有的http请求都会依次调用app.use()方法,所以中间件的使用顺序非常重要. 中间件的执行顺序 官方 ...

  5. 搭建nodejs服务，访问本地站点文件

    搭建nodejs服务器步骤: 1.安装nodejs服务(从官网下载安装) 2.在自己定义的目录下新建服务器文件如 server.js 例如,我在E:\PhpProject\html5\websocke ...

  6. mondb08---导入导出

    //Mongodb数据的导入导出 : 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项:(本地机就不用这个了) -h host 主机 --port port ...

  7. Codeforces Round #361 (Div. 2)A. Mike and Cellphone

    A. Mike and Cellphone time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. C# Stopwatch

    问题一:前几天写并行计算的实际应用——通讯录的时候,用到了stopwatch来计时,发现这个计时是真正的计时. Stopwatch stopwatch = new Stopwatch(); TimeS ...

  9. I.MX6 ifconfig: SIOCSIFHWADDR: Cannot assign requested address

    /************************************************************************** * I.MX6 ifconfig: SIOCSI ...

  10. Linux网络协议栈(四)——链路层(2)

    2.协议相关2.1.第3层协议的管理在Linux内核中,有两种不同目的的3层协议:(1)    ptype_all管理的协议主要用于分析目的,它接收所有到达第3层协议的数据包.(2)    ptype ...