小工具      在线工具  汉语词典  css  js  c++  java

Nginx反向代理配置(解决跨域问题)

Nginx 额外说明

收录于:45天前

1. 跨域

这意味着浏览器无法执行其他网站的脚本。这是由浏览器的同源策略引起的,这是浏览器对 JavaScript 施加的安全限制。

实际开发过程表明,如果本地Html代码不提交到服务器,本地无法直接调用服务器API获取数据。

2.Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 服务器。其特点是占用内存少,并发能力强。事实上,nginx的并发能力在同类型的Web服务器中确实表现更好。中国大陆nginx网站的用户包括:百度、京东、新浪、网易、腾讯、淘宝等。

3.反向代理

反向代理方法是指使用代理服务器接受Internet上的连接请求,然后将请求转发到内部网络上的服务器,并将从服务器获得的结果返回给Internet上请求连接的客户端。此时,代理服务器对外界表现为反向代理服务器。

4、使用反向代理解决跨域问题的实例

在访问本地http://localhost:9966/lujing/#/basicData/carList页面时,会调用一个接口http://localhost:9966/antColonyTmcsApi/ltsVehicle/listVehicle?_t=1539742798083&pageNo=1&pageSize=10查询车辆列表数据。

因为涉及到跨域问题,无法调整。

解决方案:

nginx.conf配置如下(如最终的配置代码)后,就可以访问远程服务器上的接口数据了,这样就解决了跨域问题。

通过下面两句配置即可访问antColonyUmsApi和antColonyTmcsApi远程路径下的URL

#  antColonyUmsApi 这个路径下面的api
        location /antColonyUmsApi

# antColonyTmcsApi 该路径下的api(http://localhost:9966/antColonyTmcsApi/ltsVehicle/listVehicle?_t=1539742798083&pageNo=1&pageSize=10

位置 /antColonyTmcsApi

nginx.conf配置代码如下:

 server {
        listen       9966;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
        #  antColonyUmsApi 这个路径下面的api
        location /antColonyUmsApi {
        if ($request_method = 'OPTIONS') { 
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }


        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' *; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }


        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' *; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        # 匹配apis之后的路径和参数
        rewrite  ^.+apis/?(.*)$ /$1 break;
        include  uwsgi_params;
        # 实际调用的API
        proxy_pass http://statictest.tflj.com;
       }

       #  antColonyTmcsApi 这个路径下面的api
       location /antColonyTmcsApi {
        if ($request_method = 'OPTIONS') { 
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }


        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' *; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }


        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' *; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        # 匹配apis之后的路径和参数
        rewrite  ^.+apis/?(.*)$ /$1 break;
        include  uwsgi_params;
        # 实际调用的API
        proxy_pass http://statictest.tflj.com;
       }

        #error_page  404              /404.html;

. . .

相关推荐

额外说明

qt 设置程序图标

创建一个ico图标,拷贝到程序根目录 修改程序配置文件xxx.pro ... RC_ICONS=app.ico 重新发布即可!

额外说明

Microsoft SQL Server数据库使用(3)

##Microsoft SQL Server 数据库使用(三) 一、查询数据 注:下面使用 Microsoft SQL Server 2019 数据库练习使用可以在我的资源下载中下载数据库脚本文件。 1.分页查询 (1)、OFFSET 子句指定在开始从查

额外说明

Python-MySQL存储

MySQL的储存:    python2: MySQLdb    python3: PyMySQL 连接数据库:    用户名root,密码123456,端口3306 import pymysql db = pymysql.connect(host='

额外说明

【Unity3D日常BUG】Unity3D中导入Obi插件出现的错误:DLLNotFouindException:libOni

推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 导入其他人项目的时候可能出现的错误: 显示未找到DLL

额外说明

【Unity3D开发小游戏】《贪吃蛇》Unity开发教程

文章目录 一、前言 二、资源下载 三、正文 游戏介绍 Unity版本 项目设置 添加边界 创建食物预制体 生成食物 生成食物 创建贪吃蛇 组成蛇身 蛇的尾部 喂蛇 四、总结 一、前言 贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本。既简单又耐玩

额外说明

GeoServer的搭建

最近项目上需要对GIS数据进行分析,因此搭建了一个GeoServer来对ShapeFile进行呈现和分析,现记录一下过程: 1. 安装GeoServer,我直接选择了Windows的安装版 2. 添加Data Store。我用的是ShapeFile文件,

额外说明

【Python 千题 —— 基础篇】加法计算

题目描述 题目描述 编写一个程序,接受用户输入的两个数字,然后计算这两个数字的和,并输出结果。 输入描述 输入两个数字,用回车隔开两个数字。 输出描述 程序将计算这两个数字的和,并输出结果。 示例 示例 ① 1 2 输出: 3.0 代码讲解 下面是本

额外说明

LIBSVM与LIBLINEAR支持向量机库对模式识别与回归的可视化代码实践

支持向量机(SVM)是一种流行的分类技术。虽然提出时间到现在有70来年了,但在90年代获得了很好的发展和扩展,在人像识别、文本分类、手写字符识别、生物信息学等模式识别问题中有得到应用。然而,对于不熟悉SVM的初学者来说,往往会因为错过了一些简单但重要的步

额外说明

Windows系统丢失shellstyle.dll文件导致程序异常问题

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个shellstyle.dll

ads via 小工具