利用Nginx设置跨域的方式
1、服务端可控,添加响应头
2、服务端不可控、通过Nginx反向代理
3、服务端不可控、通过Nginx反向代理添加响应头
第一种方法、服务端可控时,可以在服务器端添加响应头(前端+后端解决)
浏览器地址为http://127.0.0.1:5501/xx.html
请求地址为http://localhost:3000/test
前端代码
function myFunction() {
$.get("http://localhost:3000/test", function (data, status) {
alert("数据: " + data + "\n状态: " + status);
});
};
后端代码(node+express)
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5501");//将http://127.0.0.1:5501改成*可以允许所有跨域
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next(); });
总结:直接访问,在服务器端设置跨域头即可
第二种方法、服务端不可控、通过Nginx反向代理(前端+Nginx解决)
浏览器地址为http://127.0.0.1:5000(实际页面应为http://127.0.0.1:5501/xx.html)
请求地址为http://127.0.0.1:5000/test
Nginx配置为
server{
listen 5000;
server_name localhost; location = / {
proxy_pass http://localhost:5501/xx.html;
} location /test {
proxy_pass http://localhost:3000/test;
}
}
前端代码
function myFunction() {
$.get("http://localhost:5000/test", function (data, status) {
alert("数据: " + data + "\n状态: " + status);
});
};
总结:原始页面与待请求数据都通过Nginx监听反向代理,由于页面端口与请求端口一致则无需跨域。(浏览器地址栏非原始页面,原始页面与待请求数据都需要被反向代理)
第三种方法、服务端不可控、通过Nginx为响应添加跨域头(前端+Nginx解决)
浏览器地址为http://127.0.0.1:5501/xx.htm
请求地址为http://127.0.0.1:5000/test
Nginx配置为
前端代码
function myFunction() {
$.get("http://localhost:5000/test", function (data, status) {
alert("数据: " + data + "\n状态: " + status);
});
};
总结:浏览器地址栏为原始页面,待获取数据通过反向代理,再应答时通过Nginx添加跨域头。(只有请求需要代理)
利用Nginx设置跨域的方式的更多相关文章
- 利用nginx解决跨域问题
访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 如何用Nginx解决跨域问题
一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...
- PHP利用P3P实现跨域
本文转自:点这里 有别于JS跨域.IFRAME跨域等的常用处理办法,还可以利用P3P来实现跨域. P3P是什么 P3P(Platform for Privacy Preferences)是W3C公布的 ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
- python 跨域处理方式
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...
- nginx解决跨域(前后端分离)
Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...
- 基于jQuery的Jsonp跨域[Get方式]
由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...
- Java利用cors实现跨域请求
由于ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告 网站开发,在某些情况下需要用到跨域. 什么是跨域? 跨域,指 ...
随机推荐
- linux多线程入门
linux下的多线程通过pthread实现,下面给个简单的例子. #include <stdio.h> #include <stdlib.h> #include <pth ...
- 从零开始通过webhooks实现前端自动化
1. 前置条件 有一台自己的服务器.比如阿里云,腾讯云之类 有远程仓库能够push代码,pull代码.比如github,或者码云 远程仓库有webhooks功能 2. 自动化部署流程 3. 构建流程 ...
- docker-compose安装rabbitmq集群(主从集群---》镜像集群)
docker-compose安装rabbitmq集群(主从集群--->镜像集群) yls 2020/5/11 创建docker-compose.yml 文件 version: '3' servi ...
- 计算机网络——简单说说WebSocket协议
一.前言 之前做了一个Web小项目,需要实现后端持续给前端推送消息的功能,当时最开始使用的是轮询实现,但是效率太低,对资源消耗也大.之后为了解决这个问题,上网查阅资料后,改用了WebSocket实 ...
- Go实战面试备忘录
原文地址:https://blog.likeli.top/posts/面试/go面试备忘录/ 一个小厂的面试,记录一下,答案不对的,请帮忙更正下 go部分 map底层实现 map底层通过哈希表实现 s ...
- [hdu5216]排序
题意:给定两个长度为M的数组a,b,对于一个1-M的排列,不妨设为P,如果对任意0<=i<M,都有a[i] <= b[P[i]],那么称为一种合法情况,对于一种合法情况,对所有0&l ...
- C++内存管理学习笔记(4)
/****************************************************************/ /* 学习是合作和分享式的! /* Auth ...
- dedecms_v5.7的apache文件名解析漏洞的学习
0x00 Apache文件名解析漏洞 Apache是一个Web服务器,可以提供web服务.配合java中间件.PHP实现动态页面访问. Apache和PHP通过接口接入后,Apache接受用户的请求, ...
- 初识spring boot maven管理--配置文件
web环境下修改信息需要重启服务器,如果在一个大型的项目中经常重启服务器,那浪费的时间可想而知,今天介绍个好东西 --spring boot!一般学习都是从hello world开始学习的!下面介绍s ...
- JavaScript和TypeScript的区别和联系
转载自:http://web.jobbole.com/93618/?utm_source=group.jobbole.com&utm_medium=relatedArticles JavaSc ...