跨域常见解决方案

  • jsonp (项目基本不用)
原理:动态生成script标签,通过src属性加载
缺点:不支持POST请求,支持get请求
应用场景:有些第三方数据接口可能会使用jsonp解决跨域问题,工作中不怎么用。
  • 中间服务器代理
A前端部署地址:127.0.0.1:8000
B中间服务器:127.0.0.1:8000
C目标服务器地址:127.0.0.1:8888

因为浏览器的同源策略,A 和 c 存在跨域问题,A 无法访问 服务器c
解决:因为跨域问题仅存在于浏览器(**服务器请求服务器的数据,没有跨域问题**),所以后台可以搭建中间服务器
让服务器B请求服务器c,然后将数据返回给前端A.
  • CORS跨域资源共享,服务器端进行配置,( 后端开发人员设置 )加一个响应头(工作中常用
res.header("Access-Control-Allow-Origin","*")
  • vue.config.js vue反向代理 ( 前端开发人员设置 )
module.exports = {
    lintOnSave: false,
    devServer: {
        // 设置代理
        proxy: {
            "/api": {
                target: "http://127.0.0.1:8888/api/private/v1", // 域名
                ws: true, // 是否启用websockets
                changOrigin: true, // 开启代理:在本地会创建一个虚假服务器,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {     // 路径重写:将 /api 替换为 / 
                    "^/api": "/"
                }
            }
        }
    }
}
Logo

前往低代码交流专区

更多推荐