Nginx反向代理跨域请求处理

2018-12-29 本文已影响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 跨域请求的几种处理方式