使用CORS解决跨域问题

1.什么是动静分离

“动”与“静”

在弄清动静分离之前，我们要先明白什么是动，什么是静。

在Web开发中，通常来说，动态资源其实就是指那些后台资源，而静态资源就是指Html、img、js、css等文件。

动静分离就是将动态资源和静态资源分开，将静态资源部署在Nginx上，当一个请求来的时候，如果是静态资源的请求，就直接到nginx配置的静态资源目录下面获取资源，如果是动态资源的请求，nginx利用反向代理的原理，把请求转发给后台应用去处理，从而实现动静分离。

好处

tomcat的优势在于少量的接收并处理复杂的http请求（将用户请求读写数据库等），nginx的优势在于能够大量的接收并处理简单的http请求（将http请求转发或者加个header、body等）。

将Html、img、js、css等这种静态资源交给nginx，将用户需要读写数据库等请求交给tomcat是对各自优势的最大利用。

详解

Nginx与tomcat各自的优势与区别详解参考：tomcat 与 nginx，apache的区别是什么？.

2.环境准备

需要nginx、tomcat、SpringBoot

2.1 linux

linux环境下的nginx下载、安装、使用

linux环境下的jdk8下载、安装、使用

linux环境下的tomcat下载、安装、使用

2.2 windows

windows环境下nginx下载解压后，即可使用。
Windows下Nginx的启动、停止等命令

由于使用SpringBoot，所以使用内嵌的tomcat。

3.正式部署

3.1 前台

前台使用一个ajax请求后端，新建一个index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>前后端分离</title>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#loginBtn").click(function(){
                    $.post(
                    "http://localhost:8080/username",
                    function(rtn){
                        $("#name").text(rtn.username)
                    });
                });
            });
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="查看当前用户" id="loginBtn">
            <div id="name" style="color:#00FF00">

            </div>
        </form>
    </body>
</html>

将index.html放到nginx的html目录下（将nginx/html目录下的文件都删了）。

正式部署时，只需要将静态资源扔到html目录下即可

3.2 后台

后台使用SpringBoot，只需一个接收请求的controller即可，这里为了省事，直接在Application里面写controller了。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @RequestMapping(value = "/username", method = {RequestMethod.GET, RequestMethod.POST})
    public User username() {
        // 假装请求了数据库
        User user = new User("tom");
        return user;
    }

    class User {
        private String username;

        public User(String username) {
            this.username = username;
        }

        public String getUsername() {
            return username;
        }

        public void setUsername(String username) {
            this.username = username;
        }
    }
}

启动SpringBoot项目可以访问到

正式部署时，只需要将SpringBoot打的jar包扔到服务器上启动即可

//打jar
mvn clean package -Dmaven.test.skip=true
//启动jar
nohup java -jar ROOT.jar &

3.3 nginx.conf

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        #监听8080端口，代理前端请求
        listen       80;
        server_name  localhost;
        location / {
            # 默认访问html下的index.html
            index  index.html;
        }
    }
    server {
        #监听8080端口，代理后端请求
        listen       8080;
        server_name  localhost;
        location / {
        proxy_pass http://localhost:8080;
        proxy_set_header X-Real-IP $remote_addr;
      }

    }
}

启动nginx

start nginx

nginx.conf的更多配置

Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问

nginx.conf详细配置

3.4前后端分离导致动静分离的跨域问题

访问http://localhost/

Access to XMLHttpRequest at 'http://localhost:8080/username' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

由于前后端分离了，所以前端http://localhost/使用ajax请求http://localhost:8080/发生了跨域问题。

详解：

CORS解决跨域问题

Jsonp解决跨域问题

这里直接给出解决方案，使用CORS解决跨域问题

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://localhost");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("GET");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

放到Application.java同目录及以下即可

结构：

重启项目，再次访问http://localhost/，访问成功。

4.总结

总的来说就是将静态资源html、js、css等放入nginx中，将动态请求交给tomcat。

如果发生跨域，需要在解决跨域问题。

5.答疑

Q：该例子就一个html静态资源为什么不放到项目的static下？放到static下不就不会跨域了吗？
A：因为这只是一个例子，模拟动静分离。一个真实的项目，可能将html等静态资源放到不同于后台的服务、或者CDN上，那时候就一定会发生跨域问题。

原文地址：https://www.cnblogs.com/gj-blog/p/10803616.html

时间： 2024-08-18 11:13:50

使用CORS解决跨域问题的相关文章

一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 前言 关于start()的补充 跨域解决方案 JSONP CORS CORS跨域演示 结束语 参考文献 前言 这周工作比较忙,一直没有时间学习SignalR,大致希望一周能写一篇关于SignalR的文章.上一篇用Persistent Connections方式实现了个简单的在线

Spring Boot中通过CORS解决跨域问题

今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由Netscape提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指协议.域名以及端口要相同.同源策略是基于安全方面的考虑提出来的,这个策略本身没问题,但是我们在实际开发中,由于各种原因又经常有跨域的需求,传统的跨域方案是JSONP,

Django 【第二十篇】后端CORS解决跨域问题

一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先简单来说一下JSONP,具体详细详见上面JSONP JSONP是json用来跨域的一个东西.原理是通过script标签的跨域特性来绕过同源策略.(创建一个回调函数,然后在远程服务上调用这个函数并且将json数据形式作为参数传递,完成回调). 四.CORS跨域 随着技术的发展,现

Web API中使用CORS解决跨域（暂存）

Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出请求.CORS需要浏览器和服务器同时支持,目前,主流的浏览器都支持CORS,因此实现CORS通信的关键是服务器.CORS是通过目标服务器返回的Header设

后端CORS解决跨域问题

一 . 为什么会有跨域问题 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href 属性,a标签什么的都不拦截. 二 . 解决跨域的方法 解决跨域有两种方法 : JSONP CORS 三 . JSONP 简单说下JSONP,详细的在上一篇 JSONP时json用来跨域的一个东西,原理是通过script标签的跨域特性来绕过同源策略,(创建一个回调函数,然后在远程服务商调用这个函数并且将json数据形式作为参数传递,完成回调). 原文地址:https://

cors解决跨域

什么是cors CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 浏览器端: 目前,所有浏览器都支持该功能(IE10以下不行).整个CORS通信过程,都是浏览器自动完成,不需要用户参与. 服务端: CORS通信与AJAX没有任

如何使用CORS解决跨域问题

一,为什么会有跨域问题 跨域问题的出现,是因为浏览器的同源策略对ajax请求进行阻拦了,但是并不是所有的请求都给做当做跨域,:像是一般的href属性,a标签什么的都不进行拦截 二,什么是同源策略 同源策略是一种约定,它是浏览器最核心也会是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 它约定请求的url地址,必须与浏览器的url地址处于同域上,也就是域名,端口,协议都相同. 如果不同,就会报错: 已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:

SpringBoot 中通过 CORS 解决跨域问题

同源策略 源(origin)就是协议(http).域名(localhost)和端口号(8080),同源是指协议.域名以及端口要相同. No 'Access-Control-Allow-Origin' header is present on the requested resource. 后端使用CORS(跨域源资源共享)(CORS,Cross-origin resource sharing)实现跨域 全局配置 @Configuration public class WebMvcConfig i

SpringBoot使用CORS解决跨域请求问题

什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. 举个栗子 判断下面URL是否和 http://www.a.com/a/a.html 同源 http://www.a.com/b/b.html 同源 http://www.b.com/a/a.html 不同源,域名不相同 https://www.a.com/b/b.html 不同源,协议不相同 htt