vue+Java后端进行调试时如何解决跨域问题

      今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上。这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢?

 

首先,要了解什么叫跨域访问?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

所谓同源是指,域名,协议,端口均相同,举个例子:

http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0

后端配置跨域,可以通过 Spring Boot 和 Vue.js 的组合进行实现。 下面是一个简单的 Spring Boot 配置跨域的示例: ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } } ``` 上述代码中,`@Configuration` 注解表示这是一个配置类,`CorsConfig` 类实现了 `WebMvcConfigurer` 接口。在 `addCorsMappings` 方法中,通过调用 `CorsRegistry` 对象的方法来配置跨域。 具体来说,`.addMapping("/**")` 表示配置所有的请求都支持跨域访问,`.allowedOrigins("*")` 表示所有的来源都可以访问,`.allowedMethods("*")` 表示所有的方法都可以访问,`.allowedHeaders("*")` 表示所有的头信息都可以访问,`.allowCredentials(true)` 表示允许发送 Cookie,`.maxAge(3600)` 表示缓存间为 3600 秒。 在 Vue.js 中,可以通过在 `vue.config.js` 文件中配置代理来实现跨域。 以下是一个示例代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 以上代码中,`'/api'` 表示需要代理的路径,`target: 'http://localhost:8080'` 表示代理到的地址,`changeOrigin: true` 表示开启跨域,`pathRewrite` 表示重写路径。在 Vue.js 中发送请求,只需要将请求路径的前缀改为 `/api` 即可,例如 `/api/user`。这样就可以实现跨域访问了。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值