在台电脑上分别运行springboot项目和vue项目,允许vue项目远程访问后端项目的操作
时间: 2023-12-18 13:03:12 浏览: 116
要允许vue项目远程访问后端项目,需要进行以下步骤:
1. 在springboot项目中添加CORS配置,允许来自指定域名的跨域请求。可以在WebMvcConfigurer中添加如下代码:
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080") // 允许来自指定域名的请求
.allowedMethods("*") // 允许所有请求方法
.allowedHeaders("*") // 允许所有请求头
.allowCredentials(true) // 允许跨域访问时携带cookie等信息
.maxAge(3600); // 设置缓存时间,单位秒
}
}
```
2. 在vue项目中发送跨域请求,可以使用axios库,并在请求头中添加Origin字段,指定请求的来源域名。可以在main.js中添加如下代码:
```javascript
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8081'; // 设置后端接口地址
axios.interceptors.request.use(config => {
config.headers.Origin = 'http://localhost:8080'; // 设置请求的来源域名
return config;
});
Vue.prototype.$axios = axios;
```
3. 在vue项目中调用后端接口,可以使用axios库发送请求。例如,在vue组件中可以使用如下代码:
```javascript
this.$axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
```
其中,/api/users是后端接口的地址。可以根据实际情况修改。
阅读全文