当前位置：主页 > java教程 > 前后端项目分离cors错误

前后端项目分离解决cors错误的方法详解

发布：2023-04-01 09:15:01 59

本站精选了一篇相关的编程文章，网友聂乐池根据主题投稿了本篇教程内容，涉及到cors错误怎么解决、cors报错、cors错误xhr类型、前后端项目分离cors错误相关内容，已被806网友关注，如果对知识点想更进一步了解可以在下方电子资料中获取。

前后端项目分离cors错误

前言

前后端分离项目中接口请求会出现cors错误，引发cors错误的原因为跨域请求失败。

具体解决方法有配置类重写addCorsMappings方法、controller添加@CrossOrigin注解、使用nginx解决跨域请求

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是跨域请求

例如：http://192.168.1.100:8080为java项目服务器链接，当前端页面链接中传输协议（http、https）、ip地址、服务端口任有一个不同，即为跨域。

二、配置类重写addCorsMappings方法

1、CorsConfig配置类添加@Configuration注解

2、继承WebMvcConfigurer

3、重写addCorsMappings方法

完成后再启动项目时会自动加载

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        //设置允许跨域的路径
        registry.addMapping ("/**")
        //设置允许跨域请求的域名
        .allowedOriginPatterns ("*")
        //是否允许证书
        .allowCredentials (true)
        //设置允许的方法
        .allowedMethods ("GET","POST")
        //设置允许的header属性
        .allowedHeaders ("*")
        //允许跨域时间
        .maxAge (3600);
    }
}

三、controller添加@CrossOrigin注解

注：添加@CrossOrigin注解解决跨域请求仅限springboot项目，且所有controller层添加太过繁琐，也可在父controller中添加，所有子controller继承

四、使用nginx解决跨域请求

1、http://nginx.org/en/download.html 从nginx官网下载解压

2、编辑conf下的nginx.conf

 server {
        listen       80;	#配置nginx端口
        server_name  localhost;		#需要链接的IP地址

        location / {
            root   E:/xxx/xxx/webapp;		#web代码存放路劲
            index  index.html;		#启动nginx后打开的页面
        }

		#将含有/api的接口进行代理
        location /api/ {
            proxy_pass  http://localhost:8081;		#需要访问的后端链接
        }

3、启动nginx

打开cmd命令窗口进入到解压路径（含有nginx.exe的路径），输入nginx.exe启动nginx，在浏览器输入localhost:80即可打开前端代码页面。
直接关闭cmd窗口无法停止nginx，需在cmd输入nginx -s quit命令进行停止。

注：输入nginx.exe的页面无法继续输入命令行，需重新开启一个cmd窗口。