前端解决跨域的几种方式
1、 通过jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享(CORS)7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域...
https://www.cnblogs.com/2050/p/3191744.html
参考
1、 通过jsonp跨域
JSONP 只支持GET请求
JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。
2、 使用iframe解决跨域(以前的跨域方法)
使用方法类似于jsonp格式的原生写法,也只能请求get方法
3.vue.config.js 中proxy配置
4.vite.config.js中proxy配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
base: './',
plugins: [
vue()
],
// // 反向代理配置 - 可解决跨域问题
server:{
proxy: {
'/api': {
target: "http://localhost/test5_tp/public/index.php/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
5、postMessage解决iframe跨域通信问题
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
10 降域
跨域请求带cookie
前端请求时在request对象中配置"withCredentials": true;
服务端在response的header中配置"Access-Control-Allow-Origin", “http://xxx:${port}”;
服务端在response的header中配置"Access-Control-Allow-Credentials", “true”
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)