在自己电脑同时打开前端和后端项目,前端想要通过http请求访问自己的后端并传回数据时,浏览器报错出现

has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is

这里提示的是出现了跨域问题

解决方法:
一、后端配置

如下图,在项目的目录下创建一个config包
在这里插入图片描述
然后在包里面创建一个java文件,文件名可以随意
内容如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * @Author huangqing
 * @Date 2021/3/28 14:52
 **/
@Configuration
public class AppConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(false)
                .allowedMethods("POST","GET","DELETE","PUT","OPTIONS")
                .allowedOrigins("*")
        ;
    }
}

然后重启自己的后端项目,启动完毕后,再从前端项目访问,这样就不会出现访问不了了,但是这种方法仅限于开发的小伙伴自己调试前后端项目时的简便方法

二、使用nginx代理
首先你的电脑中要安装Nginx这个工具,这里就不赘述了,网上有很多安装教程
安装好之后,进到Nginx的安装目录,点击进入config文件夹
在这里插入图片描述
使用VS code或者其他的编辑器打开打开nginx.config文件
在这里插入图片描述

打开之后进行如下配置
在这里插入图片描述
另起一个serve,listen是监听的端口号,也就是你的前端请求的端口号 ,
proxy_pass后面的地址是你的后端启动的地址和端口号
配置完毕后,回到nginx的安装目录,输入cmd回车
在这里插入图片描述
然后使用start nginxnginx.exe命令启动nginx服务
在这里插入图片描述
这样就可以直接访问后端了 ,不会出现报错

如果想要关闭nginx服务
可以使用nginx.exe -s stopnginx.exe -s quit
命令进行关闭,由于nginx占用的资源极少,所以可能有的任务管理器会出现找不到nginx的服务项,没有完全关闭

如果想要完全关闭nginx服务
先运行nginx.exe -s reload命令重新载入Nginx
再运行nginx.exe -s stop停止服务就可以了

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐