vue解决跨域问题

最新推荐文章于 2024-07-21 12:21:28 发布

微加幸福1990

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量842

点赞数 1

分类专栏： vue学习笔记

本文链接：https://blog.csdn.net/qq_29776583/article/details/88873236

版权

vue学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用vue-cli脚手架搭建项目后，（项目搭建可以参考）避免不了跟后台的交互，后台交互就要选择交互方式，目前使用axios 和 ajax 的使用方法基本一样，只有个别参数不同；如果用到了vue-cli当然推荐使用axios了，不建议使用jquery的ajax，另外vue-resource不维护了，不推荐使用了。那么交互方式选择了后就不可避免的遇到跨域问题了，因为现在前后端分离，基本上都不会在同一服务器上开发。

方法1.使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
这个方法就是在本地开启一台虚拟服务器
1、打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
  '/api': {  //使用"/api"来代替"http:168.10.60.10:8080" 
    target: 'http:168.10.60.10:8080', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'http:168.10.60.10:8080' //路径重写 
      } 
  } 
}

2、测试环境打开config/dev.env.js,配置为本地地址才会访问本地虚拟的服务器
生产环境打开config/prod.env.js,配置相对应的地址

BASE_API:'"api"'

在这里插入图片描述
3、在封装的axios的公共文件里面，获取测试环境或是生产环境需要配置的地址

方法2.后台更改header

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

方法3.使用JQuery提供的jsonp
有兴趣的童靴试试哦
1.下载依赖

cnpm install jquery --save-dev

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

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

3.在需要的temple里引入也可以在main.js里全局引入

import $ from 'jquery'

例子：

复制代码
<template>
  <div class="source">
      source{{data}}
  </div>
</template>

<script>
import $ from 'jquery'
  export default({
    name:"source",
    data(){
      return{
        data:""
      }
    },
    created(){
      this.getData()
    },
    methods:{
      getData () {
        var self = this
        $.ajax({
          url: '你要请求的url',
          type: 'GET',
          dataType: 'JSONP',
          success: function (res) {
            self.data = res.result
          }
        })
      }
    }
  })
</script>

<style>

</style>