Nginx反向代理node，实现让静态文件在同一域
Nginx反向代理node，实现让静态文件在同一域
不管是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，实现让静态文件在同一域的更多相关文章
- nginx反向代理node.js获取客户端IP
使用Nginx做node.js程序的反向代理,会有这么一个问题:在程序中获取的客户端IP永远是127.0.0.1 如果想要拿到真实的客户端IP改怎么办呢? 一.首先配置Nginx的反向代理 proxy ...
- CentOS 7 安装 Nginx 反向代理 node
安装 nginx yum install epel-release yum install nginx 配置 nginx sudo vim /etc/nginx/nginx.conf, 改成下面配置: ...
- 用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 ...
- CORS跨域与Nginx反向代理跨域优劣对比
最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主 ...
- node项目发布+域名及其二级域名配置+nginx反向代理+pm2
学习node的时候也写了一些demo.但是只是限于本地测试,从来没有发布.今天尝试发布项目. 需要准备的东西 node 项目:为了突出重点,说明主要问题.我只是拿express 写了很简单的demo. ...
- Nginx反向代理Tomcat静态资源无法加载以及请求链接错误
在使用Nginx实现Tomcat的负载均衡的时候,项目发布到了Tomcat,Nginx也配置好了, 当访问的时候发现了与预期不符 表现为: 静态资源加载失败 链接跳转地址错误 下面是我错误的配置文件 ...
- Nginx反向代理上传大文件报错（failed to load resource : net :: ERR_CONNECTION_RESET）
转自: https://blog.csdn.net/kinginblue/article/details/50753271?locationNum=14&fps=1 Nginx反向代理上传大文 ...
- nginx反向代理部署springboot项目报404无法加载静态资源
问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...
- Nginx反向代理以及负载均衡配置
项目地址:http://git.oschina.net/miki-long/nginx 前提:最近在研究nginx的用法,在windows上小试了一下,由于windows下不支持nginx缓存配置,所 ...
随机推荐
- 多媒体开发之wis-stream
在live555的mediaServer中,已经实现RTSP-over-HTTP,但默认没有开启.如果要实现这个功能,需要调用RTSPServer::setUpTunnelingOverHTTP(), ...
- 临时表 数据在 内存 转移时间 将160秒的创建临时表时间放入定时任务 不到1秒的求和时间 hadoop 引入Hadoop 分布式计算
SELECT SUM(pv) as pv_t FROM 行 112247817表类型 InnoDB自动递增值 1082428327行格式 Compact索引长度 8.60 GB (9,235,93 ...
- jquery ui tabs详解(中文)
1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...
- 内部消息 微软中国云计算 内測Azure免费账号 赶紧申请 错过不再有
内部消息 微软中国云计算 顶级内測Azure免费账号 火热申请 过期不再有! 微软MSDN俱乐部 29754721, [一大波Azure免费账号来袭]Windows Azure再次开启示放免费试用账 ...
- java根据文件流判断文件类型（后缀名）
import java.io.FileInputStream; public class FileType{ public static String bytesToHexString(byte[] ...
- 【Linux 内核网络协议栈源码剖析】网络栈主要结构介绍（socket、sock、sk_buff，etc）
原文:http://blog.csdn.net/wenqian1991/article/details/46700177 通过前面的分析,可以发现,网络协议栈中的数据处理,都是基于各类结构体,所有有关 ...
- caioj1270: 概率期望值1：小象涂色
DP深似海,得其得天下.——题记 叕叕叕叕叕叕叕叕叕叕叕(第∞次学DP内容)被D飞了,真的被DP(pa)了.这次D我的是大叫着第二题比较难(小象涂色傻b题)的Mocha(zzz)大佬,表示搞个概率DP ...
- 如何在Android studio中同时打开多个工程？
最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...
- 并不对劲的bzoj4816:loj2000:p3704[SDOI2017]数字表格
题目大意 有函数\(f(x)\),\(f(0)=0,f(1)=1,f(x)=f(x-1)+f(x-2)\) \(t\)(\(t\leq1000\))组询问,每次给定\(n,m\)(\(n,m\leq1 ...
- 协议森林02 小喇叭开始广播 (以太网与WiFi协议)
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. “小喇叭开始广播啦”,如果你知道这个,你一定是老一辈的人.“小喇叭”是五十年代到八十年代的儿童广播 ...