前端跨域解决方案

🦁 项目场景

---

场景列表

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

1. Ajax跨域请求（常见于前后端分离的项目中）；
2. 前端跨域通信（常见于多个子域名之间的通信）；
3. 前端应用访问第三方API（例如调用Google或Facebook API）；
4. Websocket通信跨域；
5. iframe嵌套，父子页面跨域；
6. 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.
1
2

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

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

---

狮子最近在学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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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!";
    }
}
1
2
3
4
5
6
7
8
9
10

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

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

    @GetMapping("/myEndpoint")
    public String myEndpoint() {
        return "Hello World!";
    }
}
1
2
3
4
5
6
7
8
9
10

2.前端解决 proxy

devServer: {
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true
     }
   }
}
1
2
3
4
5
6
7
8

🦁 总结

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

1. JSONP：通过动态创建script标签，利用script标签可以跨域请求资源的特性，将请求数据作为参数传递给服务器，服务器返回一段js代码执行，这段代码可以调用前端事先定义好的函数来处理数据。

2. CORS（跨域资源共享）：服务器端设置Access-Control-Allow-Origin头信息来允许指定的域名访问资源，同时可以设置其他参数如Access-Control-Allow-Methods、Access-Control-Allow-Headers等。

3. 代理：利用服务器中转跨域请求，前端请求数据发送到自己的服务器，服务器再发送请求到目标服务器获取数据，最后将数据返回给前端。

4. Nginx反向代理：在Nginx服务器上设置代理，将跨域请求的域名指向本机，然后由Nginx服务器转发请求并返回结果。

5. postMessage：H5新增的API，允许不同页面之间跨域通信。在A页面中使用postMessage向B页面发送消息，B页面接收到消息后进行响应。