vue项目之跨域解决方案

妙思维JS++ 专栏收录该内容
10 篇文章 1 订阅

跨域常见解决方案

  • 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": "/"
                }
            }
        }
    }
}
  • 6
    点赞
  • 0
    评论
  • 21
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页

打赏作者

落花流雨

你的鼓励将是我创作的动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值