解决vue项目中前后端交互的跨域问题、nginx代理配置方式

解决Vue项目中前后端交互的跨域问题是项目开发中非常常见的问题，通常我们可通过以下几种方式解决此问题：

一、后端服务配置跨域访问

当Vue项目与后端服务不在同一服务器上时，通过在后端服务中配置支持跨域访问，以解决跨域的问题。后端服务可以通过设置响应头的方式让浏览器接受到允许的跨域请求，相关的示例如下：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}

上述代码实现了对所有请求路径下的跨域请求的处理，其中：

• allowedOrigins - 表示支持跨域访问的Ip地址或域名，*表示所有的地址都可以访问。
• allowCredentials - 是否支持跨域访问时携带 cookie，通常为 true。
• allowedMethods - 表示允许的请求方法。
• maxAge - 表示预检请求的缓存时间。

二、使用代理方式解决跨域问题

通过nginx代理Vue项目和后端服务，实现跨域访问，这种方式需要配置一个nginx作为反向代理服务器。下面列出一个简单的nginx代理配置的例子：

server {
    listen 80;
    server_name api.domain.com;
    location / {
        proxy_pass http://localhost:8080;  # 将请求转发到后端服务
        proxy_set_header Host $host;
    }
    location /static/ {
        root /usr/share/nginx/html/;  # 配置静态文件访问的目录
        index index.html index.htm;
    }
}

上述配置的功能是将API服务器的地址设为api.domain.com，并将客户端发起的所有请求转发到后端服务的8080端口。同时可以将前端静态文件储存在Nginx服务的静态文件服务器上。

三、在Vue项目的config.js文件中配置跨域请求

在Vue项目中可以通过修改config.js配置文件中的devServer.proxy选项来实现对跨域请求的处理，具体实现如下：

module.exports = {
    baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',  // 需要转发到后端服务的服务地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''   // 将/api开头的路径替换为空
                }
            }
        }
    },
    productionSourceMap: false
}

在上述配置中，匹配到/api开头的路径会被代理至http://localhost:8080，并通过pathRewrite进行路径替换。

综上，我们通常通过后端服务配置跨域访问、使用代理方式进行跨域访问以及在前端项目配置文件中配置跨域请求的方式来解决Vue项目中前后端交互的跨域问题。