nginx解决跨域(前后端分离)
Nginx解决跨域问题
后端接口
| 请求地址 | 返回数据（json数据） |
|---|---|
| http://127.0.0.1:8080//app | Hello World! |
前端代码
通过nginx做静态资源服务器访问端口8081
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
// 直接请求后端接口访问不通 会报跨域问题
// $.get("http://127.0.0.1:8080/app",function(data,status){
// 利用同源策略访问 访问的实际地址是 http:127.0.0.1:8081/api/app
// nginx代理会跳转到http:127.0.0.1:8080
$.get("/api/app",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET(跨域)请求，然后获得返回的结果</button>
</body>
</html>
#前端工程静态资源服务器(同时使用同源策略解决跨域问题)
server { #访问端口(页面访问端口)
listen 8081;
server_name localhost; error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
} location / {
# 前端工程根目录
root C:\Users\Covet\Desktop\origin-view;
index index.html;
}
#代理路径 地址是以spi开头的 ‘/api开头的都走这个代理’
# 将前端访问的后台端口变更为‘前台id:前台端口/api/xxx/xxx’
location /api { #正则表达式匹配路径 rewrite ^.+api/?(.*)$ /$1 break; include uwsgi_params; #后端端口(后端最终访问的端口) proxy_pass http://127.0.0.1:8080; }
location @router {
rewrite ^.*$ /index.html last;
}
}
nginx解决跨域(前后端分离)的更多相关文章
- 无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 如何用Nginx解决跨域问题
一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...
- nginx反向代理实现前后端分离&跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- 使用nginx解决跨域问题（flask为例）
背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...
- 利用nginx解决跨域问题
访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...
- 前端如何使用proxyTable和nginx解决跨域问题
最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...
- vue项目打包本地后通过nginx解决跨域
前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...
随机推荐
- Codeforces Round #408 (Div. 2) D. Police Stations（最小生成树+构造）
传送门 题意 n个点有n-1条边相连,其中有k个特殊点,要求: 删去尽可能多的边使得剩余的点距特殊点的距离不超过d 输出删去的边数和index 分析 比赛的时候想不清楚,看了别人的题解 一道将1个联通 ...
- poj1664【DFS】
思路:搜一下,还想多了,记得以前做过把一个数搞成几个数的相加组合,然后这题无非就是多了个组合的个数<=m的,那么只要多加一个条件,当num>m的时候也return掉就好了. //#incl ...
- git自动化部署+rsync文件同步
1.进入线上git裸仓库 2.编辑post-receive #!/bin/sh unset GIT_DIR cd /var/www/ git pull http://web:xxxxxxx@120.3 ...
- Linux下下载百度网盘资料
因为百度网盘没有Linux下的客户端,所以无法直接下载网盘里的资料了.各路大神各显神通,提出了各种解决方法,这里只介绍两种. 1.BaiduPCS Github上有人通过Go语言写了一个Baidu网盘 ...
- 第十篇 .NET高级技术之委托
委托是一种可以指向方法的数据类型,可以声明委托类型变量. 声明委托的方式:delegate返回值类型 委托类型名(参数) 比如delegate void MyDel(int n) 注意这里的除了前 ...
- Beta版本冲刺第二天！
该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业地址:https://edu.cnblogs.com/c ...
- the little schemer 笔记(6)
第六章 Shadows 1 是算术表达式吗 是 3 是算术表达式吗 是的 1+3 是算术表达式吗 是的 1+3×4 是算术表达式吗 当然是 cookie 是算术表达式吗 是啊,你需要来一块吗 e那么 ...
- Python入门小练习-001-备份文件
练习适用于LINUX,类Unix系统,一步一个脚印提高Python . 001. 类Unix系统中用zip命令将文件压缩备份至 /temporary/ 目录下: import os import ti ...
- 【LeetCode 337 & 329. memorization DFS】House Robber III
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...
- Python 3.6.5安装过程中小错误zipimport.ZipImportError: can't decompress data; zlib not available
执行 :yum install -y zlib*之后,就好了.该安装错误是在CentOS7.4中遇到的.