vue解决跨域问题汇总

男娘i 2021-07-25 19:52 505阅读 0赞

方法1：后台更改header

header('Access-Control-Allow-Origin:*')；//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式

方法2：使用Jquery提供的jsonp

  1. methods:{ 
  2.     getData(){ 
  3.         var self = this;
  4.         $.ajax({ 
  5.             url:"http://xxxxxxxx.json",
  6.             type:"GET",
  7.             dataType:"JSONP",
  8.             success:function(res){ 
  9.                 self.data = res.data.slice(0,3)
  10.                 self.opencode = res.data[0].opencode.split(',')    
  11.             }
  12.         })    
  13.     }
  14. }

方法3：使用http-proxy-middleware代理模块（项目使用vue-cli脚手架搭建）

  1. 打开config/index.js,在proxyTable中添加如下代码：

    1. proxyTable:{ 
    2.     '/api':{  //使用/api来代替https://xxxx.com
    3.         target:"https://xxxx.com",//源地址
    4.         changeOrigin:true,//改变源
    5.         pathRewrite:{ 
    6.             '^/api':"https://xxxxx.com" //路径重写
    7.         }
    8.     }
    9. }

  2. 使用axios请求数据时直接使用”/api”

    getData(){ 

    1. axios.get('/api/xxx.json',function(res){ 
    2.     console.log(res);
    3. })

    }

通过这种方法解决跨域，打包部署时还按这种方法会出现问题，解决方法如下下：

  1. let serverUrl = "/api/" // 本地调试时
  2. // let aerverUrl = "https://xxxx.com" //打包部署上线时
  3. export default { 
  4.     dataUrl:serverUrl + "xxxx.json"
  5. }

引入jquery的两种方式

通过jquery文件引入

通过下载依赖安装依赖引入

  1. 下载依赖 cnpm install jquery --save-dev

  2. 在webpack.base.conf.js文件中加入

    plugins:[

    1. new webpack.ProvidePlugin({ 
    2.     $:'jquery',
    3.     jQuery:'jquery'    
    4. })

    ]

  3. 在需要的template中引入，也可以在main.js中全局引入
    import $ from "jquery"

发表评论

表情：
评论列表 （有 0 条评论，505人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue解决跨域问题

    两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。 跨域问题的报错是下面这样的...

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 177 阅读

    相关 【Vue】Vue 中解决跨域问题

    背景 跨域问题，来源于浏览器中的同源策略。同源（或同一个域）是两个页面具有相同的 协议，主机 和 端口号。在前后端分离的项目中，两个页面（即访问端与服务端）通常是 非同源 的

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 84 阅读

    相关 跨域解决方案汇总

    跨域解决方案汇总 同源策略 由于浏览器的同源策略，如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源，只要有一者不同，就会造成跨域 js

    怼烎@怼烎@/ 0 赞/ 416 阅读