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 #324 (Div. 2)C. Marina and Vasya
A的万般无奈...后来跑了大牛的这份代码发现, 题意是求一个序列与给定的两个序列有t个不同. 只要保证...对应位置就行了.. 所以处理起来非常方便.............. 可是没有感觉是对应位置 ...
- CodeForces 622C
题意: 给你一个数组,m个询问,l,r,x;让你输出在区间[ l , r ]上哪个位置不等于x. 思路: 额..我这个思路还是剽来的...不过真心赞啊. 开个p数组,直接记录数组每个元素的位置,并且实 ...
- spoj SUBLEX - Lexicographical Substring Search【SAM】
先求出SAM,然后考虑定义,点u是一个right集合,代表了长为dis[son]+1~dis[u]的串,然后根据有向边转移是添加一个字符,所以可以根据这个预处理出si[u],表示串u后加字符能有几个本 ...
- bzoj 3232: 圈地游戏【分数规划+最小割】
数组开小导致TTTTTLE-- 是分数规划,设sm为所有格子价值和,二分出mid之后,用最小割来判断,也就是判断sm-dinic()>=0 这个最小割比较像最大权闭合子图,建图是s像所有点连流量 ...
- Luogu P1736 创意吃鱼法【dp】By cellur925
题目传送门 题意:给出一个01矩阵,找出一条对角线,使得对角线上的元素都为1,而对角线所在矩阵其他元素均为0,使得这样的对角线最长. 状态:$f[i][j]$表示以($i$,$j$)为对角线端点的最长 ...
- 分布式集群环境下，如何实现session共享三（环境搭建）
这是分布式集群环境下,如何实现session共享系列的第三篇.在上一篇:分布式集群环境下,如何实现session共享二(项目开发)中,准备好了一个通过原生态的servlet操作session的案例.本 ...
- 写一个类继承socket时遇到的问题（TCP）
主要为题出在服务器端的accept()函数,他返回两个参数,一个套接字和一个客户端的ip和端口组成的元组. 问题就出在这个套接字这里,我们继承了socket这个类,这个套接字创建的时候是通过socke ...
- Testing Round #12 C
Description For the given sequence with n different elements find the number of increasing subsequen ...
- Linux 导出Okular 编辑的pdf批注
1.环境 ubuntu 14.04 LTS Okular Version 0.19.3 Using KDE Development Platform 4.13.3 2.方法 2.1只导出批注,不改变p ...
- 今天发现一个汉字转换成拼音的模块，记录一下，直接pip install xpinyin即可
http://blog.csdn.net/qq_33232071/article/details/50915760