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项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...
随机推荐
- （水题）洛谷 - P1583 - 魔法照片
https://www.luogu.org/problemnew/show/P1583 设计一个strcut cmp用来比较,就可以了. #include<bits/stdc++.h> u ...
- Linux中查看端口占用情况及结束相应进程
1.查看某端口占用情况lsof -i :端口号 例如:lsof -i :81 显示如下信息: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME ja ...
- Backbone.js入门教程第二版笔记（3）
视图渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- solr 查询获取数量getCount()
//前期设置好查询条件和参数 long numFound = 0; SolrQuery query = new SolrQuery("*:*"); query.setQuery(& ...
- P3817 小A的糖果
题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖. 输入输出格式 输入格 ...
- 定时器、线程queue、进程池和线程池
1.定时器 指定n秒后,执行任务 from threading import Timer,current_thread import os def hello(): print("%s he ...
- Android Studio Terminal 不是内部或外部命令,也不是可运行程序或批处理文件
1.Android Studio Terminal 命令行无效的问题 在Android Studio中自带了命令行终端Terminal,但是我们在输入命令时经常会发现:“XXX”不是内部或外部命令,也 ...
- VCS 查看代码覆盖率
代码覆盖率 代码覆盖率测试一般包括行覆盖,条件覆盖,FSM覆盖,翻转覆盖率等.在不同的代码级别有不同的覆盖率,Behavioral code包含line+condition+path(branch)+ ...
- java 读取txt,java读取大文件
java 读取txt,java读取大文件 package com.bbcmart.util; import java.io.File;import java.io.RandomAccessFile;i ...
- SQL Server中的事务日志管理的阶梯，级别1:事务日志概述
SQL Server中的事务日志管理的阶梯,级别1:事务日志概述 翻译:刘琼滨 谢雪妮 许雅莉 赖慧芳 级别1:事务日志概述 事务日志是一个文件,其中SQL服务器存储了所有与日志文件关联的数据库执行的 ...