vue前后端分离解决跨域

在 前后端分离的开发模式中，前端项目和后端项目通常会运行在不同的端口上，因此会存在跨域问题。为了解决这个问题，可以采取以下几种方法：

1. 在后端框架中设置允许跨域访问的域名：在后端框架中设置响应头信息，允许指定的域名进行跨域访问。例如，在 Spring Boot 中可以通过添加 `@CrossOrigin(origins = "http://localhost:8080")` 注解来允许本地的 Vue 项目进行跨域访问。

2. 使用反向代理：在前端项目中使用反向代理，将所有后端请求转发到同一域名下的指定端口。例如，在 Vue CLI 中可以使用 vue.config.js 文件进行配置，将请求代理到后端项目的指定端口上。

3. 使用 JSONP：JSONP 是一种跨域解决方案，它通过动态创建 script 标签来进行跨域请求。在 Vue 中可以使用第三方库如 vue-jsonp 来实现 JSONP 请求。

4. 使用 CORS：CORS 是一种现代浏览器支持的跨域解决方案，它通过在 HTTP 响应头中添加 Access-Control-Allow-* 字段来允许指定的域名进行跨域访问。在后端框架中设置响应头信息，允许指定的域名进行跨域访问。需要注意的是，CORS 方案需要浏览器支持，因此不适用于一些老旧浏览器。

相关问题

vue3 element-plus前后端分离解决跨域

在前后端分离的开发模式下，前端和后端是独立的两个系统，前端向后端发送请求时，常常会遇到跨域问题。为了解决这个问题，我们可以在后端进行跨域配置，也可以在前端进行跨域请求。

1. 后端跨域配置

在后端，可以使用 Spring Boot、Node.js、Django 等框架，在配置文件中增加跨域配置，比如在 Spring Boot 中，可以在 application.properties 或 application.yml 中增加以下配置：

# 允许所有域名跨域访问
spring.mvc.crossorigin.allowed-origins=*

2. 前端跨域请求

在前端，可以使用以下几种方式解决跨域问题：

2.1 代理请求

通过在前端配置代理服务器，将前端的请求转发到后端服务器上，从而避免跨域问题。比如在 Vue.js 中，可以使用 vue-cli-service 的 proxyTable 配置实现代理请求：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      // 将请求转发到后端服务器上
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2.2 JSONP 请求

JSONP 请求是一种利用 script 标签的跨域技术，通过在前端页面中动态创建 script 标签，然后在后端返回一个 JSONP 回调函数，前端就可以获取到后端数据了。比如在 Vue.js 中，可以使用 axios-jsonp 库实现 JSONP 请求：

// 安装 axios-jsonp 库
npm install axios-jsonp --save

// 使用 axios-jsonp 库发送 JSONP 请求
import axiosJsonp from 'axios-jsonp';

axios({
  url: 'http://example.com',
  adapter: axiosJsonp
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

2.3 CORS 请求

CORS 请求是一种支持跨域的 HTTP 请求，前端可以在请求头中增加 Origin 字段，后端可以在响应头中增加 Access-Control-Allow-Origin 字段，从而允许跨域请求。比如在 Vue.js 中，可以使用 axios 库发送 CORS 请求：

// 使用 axios 库发送 CORS 请求
axios({
  method: 'get',
  url: 'http://example.com',
  headers: {
    'Origin': 'http://localhost:8080'
  }
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

以上是解决前后端分离跨域问题的几种方案，具体选择哪种方案需要根据项目实际情况来决定。需要注意的是，在使用代理请求时，应该避免将代理服务器暴露在公网上，以避免安全问题。

Spring Boot+vue前后端分离项目如何跨域

在Spring Boot项目中，可以使用`CorsFilter`来解决跨域问题。以下是解决跨域的步骤：

1.在Spring Boot项目的配置类中，添加`CorsFilter`过滤器。

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 允许发送Cookie
        config.addAllowedOrigin("*"); // 允许任意域名
        config.addAllowedHeader("*"); // 允许任意头信息
        config.addAllowedMethod("*"); // 允许任意请求方法
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

2.在Vue项目中，可以使用`proxyTable`或`axios`来解决跨域问题。

- `proxyTable`方式

在`config/index.js`文件中，添加`proxyTable`配置。

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080', // Spring Boot项目的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api' // 让/api对应到Spring Boot项目中的/api路径
        }
      }
    }
  }
}

- `axios`方式

在Vue项目的代码中，使用`axios`时设置`withCredentials`为`true`。

import axios from 'axios'

axios.defaults.withCredentials = true

这样，在发送请求时，`axios`会将`Cookie`带过去，从而避免跨域问题。