因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案。
一.前端方案
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 // }) ] })) })
二.后端方案
在后端接口项目中增加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); } }
