前后端分离框架跨域问题的解决办法-java和python做后端的实现

最新推荐文章于 2023-09-12 03:35:46 发布

11个口袋

最新推荐文章于 2023-09-12 03:35:46 发布

阅读量488

点赞数

分类专栏： webservice 文章标签： java 跨域 python vue 同源问题

本文链接：https://blog.csdn.net/aattxx/article/details/107990283

版权

webservice 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

跨域-它是浏览器最重要的一项安全策略即同源策略造成的.

所谓同源是指，域名，协议，端口均相同：

http://www.baidu.com/index.html 调用 http://www.baidu.com/server （非跨域）

http://www.baidu.com/index.html 调用 http://www.baidu222.com/server（主域名不同:baidu/baidu222，跨域）

http://image.baidu.com/index.html 调用 http://video.baidu.com/server（子域名不同:image/video，跨域）

http://www.baidu.com:8081/index.html 调用 http://www.baidu.com:8082/server（端口不同:8080/8081，跨域）

http://www.baidu.com/index.html 调用 https://www.baidu.com/server（协议不同:http/https，跨域）

另外要注意：127.0.0.1/localhost也属于跨域行为。

当浏览器执行前端页面的js脚本时，就会检查脚本所属于页面是否同源，如果不同源，请求就会失败。

------------------------------------------------- 分割线---------------------------------------------------------------------------------------

java后端实现跨域：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.util.pattern.PathPatternParser;

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");

   /*     config.setAllowCredentials(true); // 允许cookies跨域
        config.addAllowedOrigin("*");// #允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Origin
        config.addAllowedHeader("*");// #允许访问的头信息,*表示全部
        config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
        config.addAllowedMethod("OPTIONS");// 允许提交请求的方法类型，*表示全部允许
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");*/
        org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource source =
                new org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

------------------------------------------------- 分割线---------------------------------------------------------------------------------------

后端python+fastApi+uvicorn的实现跨域：

from fastapi import FastAPI
import uvicorn
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
"http://www.baidu.com",
"http://image.baidu.com:8888",
"http://vedio.baidu.com:8888"

"http://vedio.baidu.com:5555"
]
app.add_middleware(
CORSMiddleware,
# CORS_ORIGIN_ALLOW_ALL=True,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"]
)

------------------------------------------------- 分割线---------------------------------------------------------------------------------------

前端VUE的实现：

methods: {
PostQuery: function () {

this.$axios.post(this.getUrl()).then(response => {
var jsonData;
if (response) {
this.$Message.error('查询结果正确返回')
} else {
this.showTable = false;
this.$Message.error('查询接口未返回任何结果')
}
}).catch(ex => {
this.$Message.error('查询接口异常请联系程序员小哥');
console.log("异常信息：" + ex.toLocaleString());
})
},
getUrl: function () {
return 'http://www.baidu.com.com/query';
}
},