美文网首页
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反向代理跨域请求处理

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