前后端跨域常用解决方案-CFANZ编程社区

因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案。

一.前端方案

1.jsonp跨域

2.反向代理服务跨域

i:什么叫反向代理?

反向代理指的是在前端的服务器环境中，短暂的开启一个后端服务器，由后端服务器进行数据请求，然后在将结果返回给前端

ii:使用工程化工具自带的反向代理服务(webpack)

iii:使用第三方提供的反向代理服务(gulp中的http-proxy-middleware)

操作流程:

初始化:

npm init -y

安装gulp:

npm install gulp

安装gulp-webserver服务:

npm install gulp-webserver

gulpfile.js文件配置:

const gulp = require('gulp') //引入gulp
const server = require('gulp-webserver') //引入gulp-webserver服务
const proxy = require('http-proxy-middleware') //引入http代理服务

gulp.task('server', function() {
    gulp.src('./')
        .pipe(server({
            port: 9001,
            host: 'localhost',
            livereload: true,
            // directoryListing: {
            //   enable: true,
            //   path: '/'
            // },
            open: true,
            allowEmpty: true,
            middleware: [
                // proxy(标记，配置项)
                // proxy('/yyb', {
                //     target: 'http://127.0.0.1:3001/get',
                //     changeOrigin: true,
                //     pathRewrite: {
                //         '^/yyb': ''
                //     }
                // }),
                proxy('/users', {
                    target: 'http://localhost:3000',
                    changeOrigin: true
                }),
                // proxy('/login', {
                //     target: 'http://localhost:3000',
                //     changeOrigin: true
                // })
            ]
        }))
})

请求用的(index.html)文件配置:

<script>
        $.ajax({
            type: "get",
            url: "/users",
            //    data: "data",
            // dataType: "json",
            success: function(response) {
                console.log(response)
            }
        });
    </script>

二.后端方案

在后端接口项目中增加CorsConfig.java即可，代码如下
 
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}