前后端跨域常用解决方案

纸飞机 发表于 2021/10/28 09:38:49 2021/10/28
【摘要】 因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案。 一.前端方案 1.jsonp跨域https://blog.csdn.net/qq_32442973/article/details/120100239 2.反向代理服务跨域i:什么叫反向代理?反向代理指的是在前端的服务器环境中, 短暂的开启一个后端服务器, 由后端服务器进行数据请求, 然后在将结果返回给前端ii...

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

一.前端方案

1.jsonp跨域

https://blog.csdn.net/qq_32442973/article/details/120100239

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);
    }
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。