vue-element ui 学习笔记-03

最新推荐文章于 2026-02-15 17:41:36 发布

原创最新推荐文章于 2026-02-15 17:41:36 发布 · 222 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了浏览器的跨域问题及其原因，包括同源策略的定义。文章详细讲解了解决跨域问题的多种方法，如CORS、JSONP以及Nginx反向代理，并对比了CORS和JSONP的优缺点。还提到了在SpringMVC和Spring Boot中配置CORS的两种方式，最后展示了跨域问题解决后的效果。

一、什么是跨越问题

在浏览器端进行Ajax请求时会出现跨域问题，那么什么是跨域，如何解决跨域呢？先看浏览器端出现跨域问题的现象，如下图所示
1.什么是跨域问题？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
2.什么是同源？
所谓同源是指，域名，协议，端口均相同
http://www.qf.com/   ->   http://admin.qf.cm/       跨域
http://www.qf.com/   ->   http://www.qf.com/       非跨域
http://www.qf.com/   ->   http://www.qf.com:8080/       跨域
http://www.qf.com/   ->   https://www.qf.com/       跨域
3.如何解决跨域问题？
1)使用CORS(跨资源共享)解决跨域问题
CORS是一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信(在header中设置："Access-Control-Allow-Origin","*")
2)使用JSONP解决跨域问题
JSONP(JSON with Padding)是JSON的一种"使用模式"，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于server1.example.com的网页无法与server2.example.com的服务器沟通，而HTML的<script>元素是一个例外。利用<script>元素的这个开发策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON，而是任意的JavaScript，用JavaScript直译器执行而不是用JSON解析器解析(需要目标服务器配合一个callback函数)
3)CORS与JSONP的比较
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
4)使用Nginx反向代理解决跨域问题
以上跨域问题解决方案都需要服务器支持，当服务器无法设置header或提供callback时我们就可以采用Nginx反向代理的方式解决跨域问题。
Nginx配置跨域案例，在nginx.conf的location中增加如下配置：

add_header Access-Control-Allow-Origin *或域名
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

如：

user nginx;
worker_processes 1;
events {
    worker_connections  1024;
}

http {
    include            mime.types;
    default_type    application/octet-stream;

    sendfile        on;
    keepalive_timeout    65;

    server {
        listen 80;
        server_name 192.168.75.128;
        location / {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

            root /usr/share/nginx/wwwroot/cdn;
            index index.jsp index.html index.htm;
        }
    }
}

二、SpringMVC配置CORS

<mvc:cors>
    <mvc:mapping path="/**"
        allowed-origins="*"
        allowed-methods="POST, GET, OPTIONS, DELETE, PUT, PATCH"
        allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
        allowed-credentials="true" />
</mvc:cors>

三、拦截器的方式配置解决跨域

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Slf4j
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object o,ModelAndView modelAndView) throws Exception {
    // Access-Control-Allow-Origin
    String origin = request.getHeader("Origin");
    System.out.println("origin..........."+origin);
    response.setHeader("Access-Control-Allow-Origin", origin);
    response.setHeader("Vary", "Origin");

    // Access-Control-Max-Age
    
}

四、Spring Boot配置CORS

1.使用Java配置的方式

/**
 * 跨域配置
 * <p>Title: CorsConfiguration</p>
 * <p>Description</p>
 */
@Configuration
public class CorsConfiguration extends WebMvcConfigurerAdapter {
    @Override
}

2.使用注解的方式
3.解决跨域后的效果图

PS：
跨域问题：
vue项目部署在的服务器：http://localhost:8080
后端接口部署在的服务器：http://localhost:8090

1.什么是跨域
这是浏览器对js的一种安全限制，也就是说浏览器的页面内去访问其他服务器上的资源的时候，就会出现跨域。同源策略明确了什么情况是属于跨域。所谓的同源策略，指的是协议、域名、端口完全相同，才是安全的。
2.跨域的解决方案
上面提供了不同环境下的解决方案，参考即可。