前后端分离跨域问题

博客介绍了后端解决跨域问题的方法。通过在github搜索django cors headers,点击第一个结果,在环境中安装,再依据文档在settings.py里进行配置,且建议将其放在首位。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

后端解决:

1.

在github中搜索 django cors headers 

点击第一个:

2.

在环境中安装:

pip install django-cors-headers

3.

然后在根据文档进行配置(settings.py):

NSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

 建议把它放在第一个;

CORS_ORIGIN_ALLOW_ALL=True

### 若依框架前后端分离问题解决方案 #### CORS简介 资源共享(CORS,Cross-Origin Resource Sharing)是一种机制,它允许浏览器向不同源的服务器发出 XMLHttpRequest 请求。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互[^1]。 #### 若依框架中的解决方式 在若依框架中,可以通过多种方式进行配置: 1. **使用 `@CrossOrigin` 注解** 在 Controller 层的方法或类上添加 `@CrossOrigin` 注解可以实现单个接口或整个控制器的支持。例如: ```java @RestController @RequestMapping("/example") @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600) public class ExampleController { @GetMapping("/test") public String test() { return "Test Success"; } } ``` 上述代码表示 `/example/test` 接口允许来自 `http://localhost:8080` 的请求,并设置缓存时间为 3600 秒[^4]。 2. **全局配置 CORS 过滤器** 可以通过创建一个自定义的 Web 配置类来实现全局范围内的支持。以下是具体实现方法: ```java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有的路径生效 .allowedOrigins("*") // 允许所有名访问 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 支持的 HTTP 方法 .maxAge(3600L); // 缓存时间 (单位秒) } @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:8080"); } }; } } ``` 此种方式适用于需要统一管理规则的情况[^3]。 3. **Nginx反向代理** 如果不想修改后端代码,也可以通过 Nginx 来解决问题。配置如下: ```nginx server { listen 80; server_name your-domain.com; location /api/ { proxy_pass http://backend-server/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; } } ``` 使用此方法可以让前端和后端看起来像是同一源,从而规避问题[^2]。 #### 注意事项 - 当前主流推荐的方式是采用 CORS 技术,因为它更加灵活且易于维护。 - 如果涉及敏感数据传输,则需谨慎设置 `allowedOrigins` 参数,避免因开放过多权限而引发安全风险。 ```python print("以上为针对若依框架前后端分离时的问题解决方案") ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Christian_yang

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值