xiaoLiangi

导航

如何解决跨域让项目跑起来(前后端).

一.为什么会有跨域?

主要是浏览器为了安全起见,浏览器设置了同源策略(Sameoriginpolicy)是一种约定,他规定了只有协议(类似于http,https),端口(8080,80,...),域名(test,baidu,...)全部相同,就叫做同源。就不会造成跨域,请求一个页面的url的时候会检查这些资源,只要三者其中一个不同就会造成跨域

 二.解决跨域


一般你将项目从管理工具拉取下来之后,首先是后端,解决微服务(cloud)项目和单体项目解决方法都是相同的

1.直接在后端配置一个注解@CrossOrigin(不常用)

这种方法在controller上面添加一个注解解决后端跨域,但这种方式只是跨站请求伪造

 

2.nginx反向代理:他的一个原理就是,客户端发送请求(代理的地址)-代理服务器(真正的地址)-发送到目标服务器接收到真正的地址-服务器返回真实路径给代理服务器-代理服务器会将请求路径发送给客户端

 

 3.微服务网关处理跨域(微服务架构的出现,不同的微服务一般会有不同的网络地址,而外部客户端可能需要调用多个服务的接口才能完成一个业务需求,如果让客户端直接与各个微服务通信)

Spring cloud gateway是spring官方基于Spring 5.0、Spring Boot2.0和Project Reactor等技术开发的网关,简单来说就是统一配置,当然还有一个nacos,网关解决跨域有两种一个是配置文件config,一个是yaml文件

 

 

PS:最常见的,一般在项目测试阶段,跨域都是交给前端配置去处理的,在前端处理跨域的文件中配置后端的端口号和路径(大多数还是利用后端或者ngnix 代理来解决,前端可以在开发中临时配置解决问题。)

Nuxt.js项目的package.json文件中的scripts部分,它定义了一个名为dev的命令脚本。

该命令使用了cross-env这个工具来设置环境变量。具体地,它设置了BASE_URLhttp://localhost:8088/apiBASE_PORT3002NODE_ENVdevelopment

BASE_URL是用于指定前端应用与后端接口通信的基础URL,通常用于开发环境中调试和开发阶段。BASE_PORT则是指定前端应用运行的端口号,NODE_ENV则是指定当前环境为开发环境。

最后,通过执行nuxt命令来启动Nuxt.js项目。

要运行这段代码,你可以在命令行中运行npm run dev,它将按照dev定义的配置来启动Nuxt.js项目,并使用指定的环境变量。

 

 最重要的就是需要他的请求路径的目标路径的协议,端口,域名相同符合同源策略就可以访问解决跨域了.

 

posted on 2023-09-27 10:44  小亮i  阅读(62)  评论(1编辑  收藏  举报