美文网首页
Nginx反向代理跨域请求处理

Nginx反向代理跨域请求处理

作者: 宇宙小神特别萌 | 来源:发表于2018-12-29 11:24 被阅读18次

Nginx反向代理跨域请求处理

跨域报错信息
Nginxtest.html:1 Access to XMLHttpRequest at 'http://localhost:8082/SSM2/rest/public/nginxtest' from origin 'http://localhost:8083' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

接收请求服务器8082端口

1.后台代码

package com.yh.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * @program: SSM2
 * @Date: 2018/11/12 17:55
 * @Author: Mr.Zheng
 * @Description:
 */
@Controller
public class NginxController {

    @RequestMapping(value = "/rest/public/nginxtest" ,method = RequestMethod.GET)
    @ResponseBody
    public void nginxtest(){
        System.out.println("进入nginx测试");
        String str = "跨域请求成功!";
    }

}

发送服务器8083端口

2.前台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nginx跨域测试</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:800/SSM2/rest/public/nginxtest",  //一定要访问nginx配置路径
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        alert(data);
                        //var result = JSON.stringify(data); //json对象转成字符串
                    }
                });
            });
        });
    </script>
</head>
<body>
跨域请求8082端口服务器资源测试<br/>

结果:<div id="show"></div><br/>
<input id="btn" type="button" value="跨域获取数据" />
</body>
</html>

首先,要安装nginx800服务器

配置单个代理服务器

3.nginx服务器配置文件nginx.conf

upstream tomcat_server{
        server localhost:8082;
    }
    
    server {
        listen       800; #nginx端口号可以随意修改,只要端口号不被其它占用
        server_name  localhost; #nginx服务器可以是服务器IP
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://tomcat_server;  #配置代理服务器
            # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
            #add_header Access-Control-Allow-Origin *;  #当前端只跨域不带cookie时,可为*
            #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,Authorization';
            #if ($request_method = 'OPTIONS') {
            #   return 204;
            #}
        }

nginx配置多台服务器

upstream tomcat_server{
        server localhost:8082 weigth=2;   #weigth权重 数字越大权重越大,服务器优先被访问
        server 192.168.1.200:8080 weight=1;  #当localhost:8082挂掉,就访问本服务器
    }
    
    server {
        listen       800; #nginx端口号可以随意修改,只要端口号不被其它占用
        server_name  localhost; #nginx服务器可以是服务器IP
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://tomcat_server;  #配置代理服务器
            # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
            #add_header Access-Control-Allow-Origin *;  #当前端只跨域不带cookie时,可为*
            #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,Authorization';
            #if ($request_method = 'OPTIONS') {
            #   return 204;
            #}
        }

nginx服务器使用

1.打开cmd,cd到服务器安装好的路径下

I:\nginx>cd nginx

2.启动服务器方式一:

输入命令 nginx.exe 或者 start nginx ,回车即可

2.启动服务器方式二:直接双击nginx.exe,双击后一个黑色的弹窗一闪而过

3.检查nginx是否启动成功

页面显示:则成功

Welcome to nginx!

4.关闭nginx

如果使用cmd命令窗口启动nginx,关闭cmd窗口是不能结束nginx进程的,可使用两种方法关闭nginx。

(1)输入nginx命令  nginx -s stop(快速停止nginx)  或  nginx -s quit(完整有序的停止nginx)

(2)使用taskkill   taskkill /f /t /im nginx.exe

5.重启nginx服务器:修改配置文件后可以使用此命令。

I:\nginx>nginx -s reload

参考:

https://www.cnblogs.com/jiangwangxiang/p/8481661.html nginx服务器下载、安装和使用

https://www.cnblogs.com/moqiutao/p/8567796.html 跨域请求的几种处理方式

相关文章

  • Nginx反向代理跨域请求处理

    Nginx反向代理跨域请求处理 跨域报错信息 接收请求服务器8082端口 1.后台代码 发送服务器8083端口 2...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

  • Nginx之跨域请求配置

    一般情况下,我们跨域请求或者跨域上传,都需要修改nginx的配置文件 比如设计跨域上传: 如果你的反向代理是Ngi...

  • nginx express 反向代理实现

    nginx 反向代理跨域https://segmentfault.com/a/1190000012859206 e...

  • nginx反向代理

    前端调用接口的时候跨域了怎么办呢,如下代码跨域: 通过nginx反向代理下载nginx:http://nginx....

  • 4种方法解决js跨域的实现方式

    一、JSONP 使用ajax实现跨域: 二、CORS跨域资源共享 三、Nginx反向代理 四、webpack (在...

  • nginx前端必备知识

    nginx在应用程序中的作用 解决跨域请求过滤配置gzip负载均衡静态资源服务器 正向代理与反向代理 代理是在服务...

  • 六、接口网关

    一、什么时接口网关 接口网关作用是拦截请求,解决跨域问题,类似于nginx的反向代理。在SpringCloud中用...

  • ajax跨域--nginx反向代理

    用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持...

网友评论

      本文标题:Nginx反向代理跨域请求处理

      本文链接:https://www.haomeiwen.com/subject/fisulqtx.html