跨域问题(@CrossOrigin和Proxy)

1️⃣跨域问题

在Web开发中，如果前端页面和后端接口不在同一个域名下，就会发生跨域请求的问题。同源策略是浏览器的一种安全策略，它限制了来自不同源的客户端脚本在浏览器中运行时的交互。同源指的是协议、域名、端口都相同。如果客户端脚本试图通过XMLHttpRequest或Fetch API等方式访问不同源的数据，就会被浏览器拦截。

例如，如果前端页面部署在

http://localhost:8080

，而后端接口部署在

http://localhost:8081

，则这两个页面就不在同一个域名下，就会发生跨域请求的问题。

为了解决跨域请求的问题，可以使用一些方式，例如在服务器端配置CORS（Cross-Origin Resource Sharing）策略、使用JSONP、使用代理服务器等。在Spring框架中，可以使用

@CrossOrigin

注解来解决跨域请求的问题。

2️⃣@CrossOrigin注解解决跨域

@CrossOrigin

是Spring框架中的一个注解，用于解决跨域请求的问题。在Web开发中，如果前端页面和后端接口不在同一个域名下，就会发生跨域请求的问题，这时候就需要使用

@CrossOrigin

来解决这个问题。

@CrossOrigin

注解可以添加在Controller类或者Controller的方法上，用于指定允许跨域请求的域名和其他相关配置。以下是一个使用

@CrossOrigin

注解的示例：

@RestController@RequestMapping("/api")publicclassUserController{@GetMapping("/user")@CrossOrigin(origins ="*", maxAge =3600)publicList<User>getUsers(){// ...}}

在上面的示例中，

@CrossOrigin(origins = "*", maxAge = 3600)

表示允许所有域名的请求，并且设置了缓存时间为3600秒。如果要指定某个域名，可以将

*

替换为具体的域名，如

@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)

。

使用

@CrossOrigin

注解可以避免跨域请求的问题，但是也可能会带来一些安全问题，因此需要谨慎使用。如果只是需要在开发环境中进行测试，可以暂时使用

@CrossOrigin

来解决问题，但是在生产环境中最好还是使用其他更安全的方式来解决跨域请求的问题。

3️⃣Proxy解决跨域问题

在Web开发中，使用代理服务器（Proxy）可以解决跨域请求的问题。代理服务器是一个位于客户端和目标服务器之间的服务器，它可以拦截客户端发送的请求并转发到目标服务器上。因此，如果客户端需要请求跨域的数据，可以先将请求发送给代理服务器，然后由代理服务器转发到目标服务器上，从而避免了跨域请求的问题。

以下是一个使用代理服务器解决跨域请求的示例：

1. 首先，需要在客户端代码中配置代理服务器的地址和端口号，可以使用http-proxy-middleware库来实现：

// src/setupProxy.jsconst{ createProxyMiddleware }=require('http-proxy-middleware');

module.exports=function(app){
  app.use('/api',createProxyMiddleware({target:'http://localhost:8081',// 目标服务器地址changeOrigin:true,// 是否改变请求头中的Origin，默认为falsepathRewrite:{// 路径重写规则'^/api':''}}));};

在上面的代码中，

createProxyMiddleware

用于创建一个代理服务器中间件，

target

指定了目标服务器的地址，

changeOrigin

指定是否改变请求头中的Origin，

pathRewrite

指定了路径重写规则，将

/api

重写为

''

。

1. 在客户端代码中使用/api作为接口的前缀，发送请求即可：

// src/App.jsimport React,{ useState, useEffect }from'react';import axios from'axios';functionApp(){const[data, setData]=useState([]);useEffect(()=>{
    axios.get('/api/users').then(res=>{setData(res.data);}).catch(err=>{
        console.error(err);});},[]);return(<div>{data.map(item=>(<div key={item.id}>{item.name}</div>))}</div>);}exportdefault App;

在上面的代码中，使用

axios

库发送请求，请求的地址为

/api/users

，因为在

setupProxy.js

中配置了代理服务器，所以实际上请求的地址为

http://localhost:8081/users

，从而避免了跨域请求的问题。

使用代理服务器可以解决跨域请求的问题，但是也可能会带来一些安全问题，因此需要谨慎使用。如果只是需要在开发环境中进行测试，可以暂时使用代理服务器来解决问题，但是在生产环境中最好还是使用其他更安全的方式来解决跨域请求的问题。