后端跨域问题和前端vue跨域问题解决

后端跨域问题解决       

 可以选择使用一个注解@CrossOrigin，但是此方法适用于Controller实现少的情况，如果较多不推荐使用。使用方法如下：

@Controller
@CrossOrigin
public class LoginController { 
@GetMapping("/loginout")
    @ResponseBody
    public Result loginout(){
        Subject subject = SecurityUtils.getSubject();
        subject.logout();
        return new Result(200,"退出成功",null);
    }
}

        使用频繁的话可以设置一个Config类如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class LoginConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

前端跨域解决：

1.这里以使用vue脚手架生成的标准项目为准。一般在项目config目录下面有个index.js文件

 devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.2.90:3000',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': '/api'//重写,
                }
            }
        }
    }

2.配置一下axios.defaults.baseURL = '/api’这样就可以保证动态的匹配生产和开发环境的定义前缀，代码如下:

// mock服务器
axios.defaults.baseURL ='/api';

也可使用一下方法：api/modules/pagesApi.js

import req from '../index'

//用户注册接口
export const register =(params)=>{
    return req("post", '/user/register', params)
}

//用户登录接口
export const login =(params)=>{
    return req("post", '/user/login', params)
}


//Model列表及分页
export const getFormList =(params)=>{
    return req("post", '/model/getFormList', params)
}

//查看详情
export const queryModel =(params)=>{
    return req("get", '/model/queryModel/'+params.id,{})
}

//Model删除接口
export const deleteModel =(params)=>{
    return req("delete", '/model/deleteModel/'+params.id,{})
}


//Model新增
export const insertModel =(params)=>{
    return req("post", '/model/insertModel', params)
}

'/api/user/login'     替换成   'http://自己的ip:自己的端口号/api/user/login'

devServer: {
    // 1.指定服务的ip
    host: "192.168.0.128",
    // 2.指定服务的端口
    port: 3000,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
	// 3.开发环境进行http的代理
    proxy: {
	   // 匹配 url 路径的开头
      '/api': {
	    // 1.路劲只要是/api开头的url都代理到下面这个网站。
        // 例如：'/api/xxxx' 会代理到 https://119.20.224.137/api/xxxx
        target: 'http://119.20.224.137:8201',
        changeOrigin: true,
        pathRewrite: { '^/api': '/api/' }
      }
    }
  },

生产环境解决跨域方法

location / {
    root   D:/browseClient/dist;  #自己的前端项目地址
    index  index.html index.htm;
}
#解决跨域
location /api {                                # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}