前端跨域解决方案

当前端请求一个不同于应用部署的域时，例如从http://localhost:3000向http://localhost:8080发送请求，就会发起一个跨域请求。默认情况下，跨域请求是被禁止的，因此会导致请求失败。同源策略是浏览器的一项安全策略，浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.JS采取的是同源策略,也就是说，当协议、域名、端口任意一个

J门提督

74952人浏览 · 2023-05-24 18:08:05

J门提督 · 2023-05-24 18:08:05 发布

🦁 项目场景

场景列表

前端跨域是指在浏览器中，当一个 Web 应用程序从一个域名获取另一个域名下的资源时，会发生跨域现象。常见的前端跨域场景包括：

Ajax跨域请求（常见于前后端分离的项目中）；
前端跨域通信（常见于多个子域名之间的通信）；
前端应用访问第三方API（例如调用Google或Facebook API）；
Websocket通信跨域；
iframe嵌套，父子页面跨域；
CDN加速，跨域访问静态资源。

网络请求跨域error

一般会出现在前后分离的项目中，前端请求后端的api时出现的error。
在这里插入图片描述

🦁 问题描述

Access to XMLHttpRequest at 'http://iwenwiki.com/api/FingerUnion/lis localhost/:1t.php'
from origin 'http://localhost:8080' has been blocked by CORS policy: No'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://iwenwiki.com/api/FingerUnion/list.phpnet::ERR FAILED 200xhr.js?66c5:220

Uncaught (in promise)
AxiosError imessage:'Network Error',name:'AxiosError'code:'ERR NETWORK'，Config: [...}, request: XMLHttpRequest, ...]

狮子最近在学vue，请求一个测试网站的资源时，出现的报错。

🦁 原因分析

JS采取的是同源策略,也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢?

tips:
同源策略是浏览器的一项安全策略，浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.

🦁 解决方案

目前主流的跨域解决方案有两种

1. `@CrossOrigin注解`：

用于表明该Controller支持跨域请求。当在一个Web应用中提供一个RESTful服务时，可能需要支持来自不同域和端口的Ajax请求。这时，如果不进行跨域配置，浏览器会阻止这些请求。该注解有两种用法

1.1 方法上方

@RestController
@RequestMapping("/books")
public class BookController {

    @CrossOrigin(origins = "http://localhost:8080")
    @GetMapping("/{id}")
    public Book findById(@PathVariable Long id) {
        // ...
    }

    @CrossOrigin(origins = "*")
    @PostMapping
    public Book create(@Validated @RequestBody Book book) {
        // ...
    }

}

1.2 类上方

当前端请求一个不同于应用部署的域时，例如从http://localhost:3000向http://localhost:8080发送请求，就会发起一个跨域请求。默认情况下，跨域请求是被禁止的，因此会导致请求失败。

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/myEndpoint")
    public String myEndpoint() {
        return "Hello World!";
    }
}

允许来自http://localhost:3000的请求访问/myEndpoint接口。也可以使用通配符*允许所有域名的请求访问：

@CrossOrigin(origins = "*")
@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/myEndpoint")
    public String myEndpoint() {
        return "Hello World!";
    }
}

2.`前端解决 proxy`

devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        changeOrigin: true
     }
   }
}

🦁 总结

跨域是指在不同的域名、端口号或协议之间进行数据交互的行为，出于安全考虑，浏览器限制了跨域数据访问，因此需要采用一些方法来解决跨域问题。以下是一些常见的解决方案：

JSONP：通过动态创建script标签，利用script标签可以跨域请求资源的特性，将请求数据作为参数传递给服务器，服务器返回一段js代码执行，这段代码可以调用前端事先定义好的函数来处理数据。
CORS（跨域资源共享）：服务器端设置Access-Control-Allow-Origin头信息来允许指定的域名访问资源，同时可以设置其他参数如Access-Control-Allow-Methods、Access-Control-Allow-Headers等。
代理：利用服务器中转跨域请求，前端请求数据发送到自己的服务器，服务器再发送请求到目标服务器获取数据，最后将数据返回给前端。
Nginx反向代理：在Nginx服务器上设置代理，将跨域请求的域名指向本机，然后由Nginx服务器转发请求并返回结果。
postMessage：H5新增的API，允许不同页面之间跨域通信。在A页面中使用postMessage向B页面发送消息，B页面接收到消息后进行响应。