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. Android 4.4.2 动态加入JNI库方法记录 （二 app应用层）

    欢迎转载,务必注明出处:http://blog.csdn.net/wang_shuai_ww/article/details/44458553 源代码下载地址:http://download.csdn ...

  2. pymssql.connect(server='.', user='', password='', database='', timeout=0, login_timeout=60, charset='UTF-8', as_dict=False, host='', appname=None, port='1433', conn_properties, autocommit=False, tds_

    http://pymssql.org/en/stable/ref/pymssql.html """ This is an effort to convert the py ...

  3. 【Java报错】Message: 3 字节的 UTF-8 序列的字节 2 无效

    报错logs 2015-03-10 10:15:32,360 ERROR [qtp32195030-27] [InvokeAfterValve.java:55] - javax.xml.stream. ...

  4. myqsl02

    常用的表的引擎 Myisam ,批量插入速度快, 不支持事务,锁表 Innodb, 批量插入相对较慢,支持事务,锁行. 全文索引:目前5.5版本,myisam,innodb都已经支持 关于事务的引擎: ...

  5. HDU2444 The Accomodation of Students —— 二分图最大匹配

    题目链接:https://vjudge.net/problem/HDU-2444 The Accomodation of Students Time Limit: 5000/1000 MS (Java ...

  6. JAVASCRIPT 和 AJax 实现局部验证

    JSP页面 <td width="10%" class="main_matter_td">真实姓名</td> <td width= ...

  7. bzoj 5017 炸弹

    题目大意: 直线上有n个炸弹有坐标x和半径r 当一个炸弹被引爆时 若有炸弹的坐标在该炸弹坐标+-r范围内则另一个炸弹也被引爆 求先引爆每一个炸弹最终会引爆多少炸弹 思路: 可以想到n平方连边然后tar ...

  8. 浅入分析和Linux内核相关的文件夹/proc和/sys .

    近来文章被踩的厉害,我只想把自己从马哥学的知识自己总结下发到博客里,但是没想到昨天一篇文章刚发一上午被踩了9次...如果您真的觉得我的文章很烂,请告诉我原因,不胜感激. 这星期,马哥讲了关于Linux ...

  9. POJ2823：Sliding Window

    传送门 题意 有一个数列a,要求你求数列b和c,b[i]是a[i]-a[i+w-1]中的最小值,c[i]是最大值.如果a是1,3,-1,-3,5,3,6,7,则b为-1,-3,-3,-3,3,3,c为 ...

  10. Chrome应用商店打不开解决方法

    方法一.谷歌访问助手(推荐) 谷歌访问助手是一款免费的谷歌代理插件,不用配置即可打开Chrome应用商店,而且速度很不错. 1.根据自己使用的浏览器点击对应版本的插件.详细安装都在下面链接中. 下载地 ...