zoukankan      html  css  js  c++  java
  • Vue项目中跨域问题解决

    • 后台更改header
    • 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
    • Jquery jsonp

    一、后台更改header

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

    二、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

    打开config/index.js,在proxyTable中添写如下代码:

    proxyTable: { 
      '/api': { 
        target: '填写请求源地址', //源地址 
        changeOrigin: true, //是否跨域
        pathRewrite: { 
          '^/api': '' //路径重写 
          } 
      } 
    }

    使用axios

     this.$axios.post("/api/地址",{
         发送的数据
        }).then(data=>{
          console.log(data);
        })

    axios的配置(main.js)

    axios.defaults.headers.post["Content-type"]="application/json";
    Vue.prototype.$axios=axios;

    使用ES6fetch请求

    fetch("/api/test/testToken.php",{
          method:"post",
          headers:{
            "Content-type":"application/json",
          },
          body:JSON.stringify({发送数据})
        }).then(result=>{
          return result.json()
        }).then(data=>{
          console.log(data);
        })

    三、使用jquery jsonp

    methods: { 
      getData () { 
        var self = this 
        $.ajax({ 
          url: '地址', 
          type: 'GET', 
          dataType: 'JSONP', 
          success: function (res) { 
            self.data = res.data.slice(0, 3)
            self.opencode = res.data[0].opencode.split(',') 
          } 
        }) 
      } 
    } 
  • 相关阅读:
    java 枚举类小结 Enum
    hibernate查询
    java装饰者模式理解
    内部类学习
    java使用json将HashMap转化成javabean小例子
    HashMap存储数据赋值javabean简单示例
    java数组转化成集合
    java正则匹配并提取字串
    Windows cmd命令反斜杠问题
    自动化构建工具
  • 原文地址:https://www.cnblogs.com/SallyShan/p/11638149.html
Copyright © 2011-2022 走看看