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>
 
 Nginx配置
#前端工程静态资源服务器(同时使用同源策略解决跨域问题)

    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解决跨域(前后端分离)的更多相关文章

  1. 无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离

    近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...

  2. 如何用Nginx解决跨域问题

    一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...

  3. nginx反向代理实现前后端分离&跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  4. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  5. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  6. 使用nginx解决跨域问题（flask为例）

    背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...

  7. 利用nginx解决跨域问题

    访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...

  8. 前端如何使用proxyTable和nginx解决跨域问题

    最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...

  9. vue项目打包本地后通过nginx解决跨域

    前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...

随机推荐

  1. HDU6050: Funny Function(推公式+矩阵快速幂)

    传送门 题意 利用给出的式子求\(F_{m,1}\) 分析 直接推公式(都是找规律大佬) \(n为偶数,F_{m,1}=\frac{2(2^n-1)^{m-1}}3\) \(n为奇数,F_{m,1}= ...

  2. bzoj 2780: [Spoj]8093 Sevenk Love Oimaster【广义SAM】

    AC自动机比较简单,把询问串做成AC自动机然后模板串边跑变更新即可 SAM是把模板串做成广义SAM,然后每个节点存有几个模板串经过,具体方法是每次更新暴力向上跳直到有时间戳我不会证为什么时间复杂度是对 ...

  3. poj 1186 方程的解数【折半dfs+hash】

    折半搜索,map会T所以用hash表来存状态 #include<iostream> #include<cstdio> #include<map> using nam ...

  4. oracle 表空间及查看所有用户的表空间

    用户有默认表空间,但是只能指定一个,但是你有其它表空间的限额的话,可以将表建到其它表空间中. 语法 create table xxx(xxxx xx) tablespace xxxxx 1.查看当前用 ...

  5. 跟我一起玩Win32开发（16）：ListView的多个视图

    在上一个例子中,我们只用到了ListView的Report视图,也就是详细视图.本文我们再把上一篇文章中所用的例子进行一下扩展,例子源码可以到俺的资源区下载. 我们为ListView中显示的数据加上图 ...

  6. ssh密钥的分发之一：ssh-copy-id

    ssh密钥的分发 我们在使用客户端账号对主机记性管理的时候,可以分为以下两种情况: .第一种情况,直接使用root账号: 优点:使用root账号密钥分发简单,指令执行简单 缺点:不安全 .第二种情况, ...

  7. AtCoder Grand Contest 011 F - Train Service Planning

    题目传送门:https://agc011.contest.atcoder.jp/tasks/agc011_f 题目大意: 现有一条铁路,铁路分为\(1\sim n\)个区间和\(0\sim n\)个站 ...

  8. DP+埃氏筛法 Codeforces Round #304 (Div. 2) D. Soldier and Number Game

    题目传送门 /* 题意:b+1,b+2,...,a 所有数的素数个数和 DP+埃氏筛法:dp[i] 记录i的素数个数和,若i是素数,则为1:否则它可以从一个数乘以素数递推过来 最后改为i之前所有素数个 ...

  9. 转：从《The C Programming Language》中学到的那些编程风格和设计思想

    这儿有一篇写的很好的读后感:http://www.cnblogs.com/xkfz007/articles/2566424.html   读书不是目的,关键在于思考.   很早就在水木上看到有人推荐& ...

  10. hibernate Day2

    Day21 实体类编写规则(1 ) 实体类中的属性是私有属性(2) 私有属性要生成get与set方法(3) 实体类中有属性作为唯一值(一般使用id值)(4) 实体类属性建议不要使用基本数据类型, 应当 ...