Vue+SpringBoot+Axios的跨域问题

Vue+SpringBoot+Axios的跨域问题

第一种方法前端解决

第一步在vue.config.js中编辑devServer

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: { 
      '/api': {
        target: 'http://localhost:8081/', //填写请求的目标地址
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
})

如果没有vue.config.js文件则找config下面的index.js配置

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {  //代理地址
        target: 'http://localhost:8001',  //需要代理的地址， 实际生产环境需要访问的地址
        changeOrigin: true,  //是否跨域
        secure: false,
        pathRewrite: {
          '^/api': ''   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
        }
      }
    },

第二步编辑main.js

import axios from 'axios'
axios.defaults.baseURL = '/api'

第三步发起请求

  mounted() {
    axios.get('/users/test')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  },

效果

第二种方法给后端加一个config

package com.zhiwei.sbappaf.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//解决跨域问题的配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

生产环境（nginx）部署

修改nginx.conf

server {
        listen       82;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html/dist/;
            index  index.html index.htm;
        }

        location /api {
            #rewrite ^/api?(.*)$ $1 break;
            proxy_pass http://localhost:8081;
        }

其实nginx配置对应的就是开发环境中的

  devServer: {
    proxy: { 
      '/api': {
        target: 'http://localhost:8081/', //填写请求的目标地址
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }

这里的 proxy对应的就是nginx中的proxy_pass

效果