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

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

Nginx 额外说明

收录于:97天前

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;

. . .

相关推荐

额外说明

mybatis 异常 Mapper 方法尝试从具有原始 re 的方法返回 null

org.apache.ibatis.binding.BindingException: Mapper method  attempted to return null from a method with a primitive return type

额外说明

SQL语句练习07

目录 一、建表 二、常见的SQL语句练习 一、建表 一、建立如下职工表 ---(-#, -----, ---, ---, -----) (命名格式“姓名拼音_三位学号_week9emp”,如LBJ_023_week9emp),其属性分别表示职工工号、姓名

额外说明

TP5+商城小程序—— REST与RESTFul

QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技am

额外说明

centos7 实现mysql 5.7主从复制(一主两从)

小伙伴们,你们好呀,我是老寇,和我一起学习mysql mysql安装包链接:https://pan.baidu.com/s/1swrV9ffJnmz4S0mfkuBbIw  提取码:1111 一、准备机器(三台机器都需要提前配置好环境,虚拟机可以克隆)

额外说明

【AIGC】如何使用自编码器完成人脸生成

一、前言 自编码器是一个非常简单的网络,早在上世纪90年代就提出了自编码器的概念。当时使用受限的玻尔兹曼机分层训练,在硬件强大的今天可以实现端到端的训练。自编码器有许多变种,比如变分自编码器、去噪自编码器、正则自编码器等。由于自编码器采用的是自监督学习,

额外说明

AI 实战篇 |基于 AI开放平台实现 【植物识别】 功能,成为行走的百科全书

- 博客主页:https://xiaoy.blog.csdn.net - 本文由 呆呆敲代码的小Y 原创,首发于 CSDN- - 学习专栏推荐:Unity系统学习专栏 - 游戏制作专栏推荐:游戏制作 -Unity实战100例专栏推荐:Unity 实战10

额外说明

【51单片机】LED点阵屏(74HC595讲解)

-专栏【51单片机】 -喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。 -音乐分享【Waiting For Love】 大一同学小吉,欢迎并且感谢大家指出我的问题- 目录 -74HC595图片 -74HC595原理 -”上升沿“是什么意思 -LED点阵屏显

额外说明

【Java 进阶篇】JDBC 登录案例详解

在本文中,我们将通过一个简单的 JDBC 登录案例来详细介绍如何使用 Java 数据库连接(JDBC)来连接数据库、进行用户身份验证等操作。这个案例将适用于数据库初学者,我们将从头开始构建一个简单的登录系统。 什么是 JDBC? JDBC 是 Java

额外说明

k-近邻算法简介及api的初步使用

Python学习系列文章:- 目录 - 文章目录 一、K-近邻算法概述 二、api 的初步使用 1. Scikit-learn 简介及安装 2. K-近邻算法 api 及使用 ① api ② 简单使用 Ⅰ、使用步骤 Ⅱ、代码示例 一、K-近邻算法概述 K

额外说明

[TQLCTF 2022]simple_bypass

文章目录 涉及知识点 解题过程 涉及知识点 无数字字母RCE 自增马构造 文件包含读取源码 解题过程 打开题目,随便注册一个用户为admin 登陆进去后,一眼发现杰哥图片有线索 我们F12看一下如何请求的 在这里发现可能存在文件包含漏洞 我们尝试读取下源

ads via 小工具