使用nginx解决跨域问题

最新推荐文章于 2024-07-30 17:02:59 发布

DFYoung

最新推荐文章于 2024-07-30 17:02:59 发布

阅读量3.7k

点赞数 2

分类专栏： nginx

本文链接：https://blog.csdn.net/dh554112075/article/details/89893326

版权

nginx 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

先来介绍一下什么是同源策略

同源(域名、协议、端口相同)策略是一种约定，是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，浏览器的正常功能将受到影响
——如果非同源，在请求数据时，浏览器会在控制台报一个异常，提示拒绝访问
在这里插入图片描述

什么是跨域？

跨域就是跨域名，跨端口，跨协议（非同源）

使用nginx解决跨域问题

为了方便，使用windows端的nginx进行测试
这里我创建了两个springboot工程进行测试，方便测试

1.创建第一个工程

这里给出依赖文件

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

创建测试页面，将使用ajax发送一个请求并将响应写到上面(localhost:8081/index是等会创建的处理该ajax请求的controller)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试页面</title>
</head>
<body>
    获取返回信息：<p id="response"></p>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $.ajax({
        type:"get",
        url:"localhost:8081/index",
        success:function(data) {
            $("#response").html(data);
        }
    });
</script>
</html>

写一个controller到index页面

package com.dfyang.server1;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {
    @GetMapping("/index")
    public String index() {
        return "/index";
    }
}

2.创建第二个工程

依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

修改application.properties文件，避免端口冲突

server.port=8081

controller

package com.dfyang.server2;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ServerController {
    @GetMapping("/index")
    @ResponseBody
    public String get() {
        System.out.println("-外界访问-");
        return "index";
    }
}

3.启动两个工程

访问localhost:8080/index
在这里插入图片描述
——注意(localhost:8080, localhost:8081)，也就是这里我们的端口是不相同的，也就是跨域了，浏览器的同源策略将我们的非同源请求拦截了下来

4.编辑hosts文件（win10再C:\Windows\System32\drivers\etc）添加

127.0.0.1 server.com
当我们访问server.com会跳转127.0.0.1:80，将会被我们在windows上启动的nginx获取到

5.接下来在nginx配置跨域

这里为了方便，使用windows端的nginx进行测试
下载windows版nginx
在这里插入图片描述
修改nginx.conf添加

	server {
        listen       80;
        server_name  server.com;
        location /index1 {
            proxy_pass  http://127.0.0.1:8080/index;
        }
        location /index2 {
            proxy_pass  http://127.0.0.1:8081/index;
        }
    }

启动nginx
这时候我们访问 server.com/index1,
nginx将反向代理 http://127.0.0.1:8080/index
在这里插入图片描述
——我们发现还是没有获取到，为什么？
因为此时我们不应该通过localhost:8081/index来获取数据了，而应该通过server. com/index2来获取数据
修改请求url

<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试页面</title>
</head>
<body>
    获取返回信息：<p id="response"></p>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $.ajax({
        type:"get",
        url:"/index2",
        success:function(data) {
            $("#response").html(data);
        }
    });
</script>
</html>

——注意这里我们已经让其在同一个域名server.com下了，因此这里是/index2
再次访问 server.com/index2
在这里插入图片描述
所以，如果有需要解决跨域的接口，尽管交给nginx，比如

	server {
        listen       80;
        server_name  server.com;
        location /index1 {
            proxy_pass  http://127.0.0.1:8080/index;
        }
        location /index2 {
            proxy_pass  http://127.0.0.1:8081/index;
        }
        location /index3 {
            proxy_pass  http://asdacc.com/index1;
        }
        location /index4 {
            proxy_pass  http://ccc.com/index2;
        }
        location /index5 {
            proxy_pass  http://127.0.0.1:8081/index3;
        }
        location /index6 {
            proxy_pass  http://127.0.0.1:8082/index;
        }
        location /index7 {
            proxy_pass  http://server1/index;
        }
    }