vue2.0 proxyTable配置，解决跨域

WilsonLiu95 发布于2019-08-22 16:19 / 2435人阅读

摘要：什么是同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

vue浏览器跨域问题及解决办法 一、问题

当浏览器报如下错误时，则说明请求跨域了。

localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight request doesn"t pass access control check: No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://localhost:8080" is therefore not allowed access. If an opaque response serves your needs, set the request"s mode to "no-cors" to fetch the resource with CORS disabled.

为什么会跨域:
因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象。

什么是同源策略:
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

简单的来说:协议、IP、端口三者都相同，则为同源

二、解决办法

跨域的解决办法有很多，比如script标签 、jsonp、后端设置cros等等...,但是我这里讲的是webpack配置vue 的 proxyTable解决跨域。

这里我请求的地址是 http://www.thenewstep.cn/test/testToken.php

那么在ProxyTable中具体配置如下:

proxyTable: {
      "/apis": {
        // 测试环境
        target: "http://www.thenewstep.cn/",  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            "^/apis": ""   //需要rewrite重写的,
        }              
      }

target：就是需要请求地址的接口域名

这里列举了2种数据请求方式： fecth和axios 1、 fetch方式:

在需要请求的页面，只需要这样写(/apis+具体请求参数)，如下：

fetch("/apis/test/testToken.php", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
        token: "f4c902c9ae5a2a9d8f84868ad064e706"
      },
      body: JSON.stringify(data)
    })
      .then(res => res.json())
      .then(data => {
        console.log(data);
      });

2、axios方式:

main.js代码

import Vue from "vue"
import App from "./App"
import axios from "axios"
Vue.config.productionTip = false

Vue.prototype.$axios = axios //将axios挂载在Vue实例原型上

// 设置axios请求的token
axios.defaults.headers.common["token"] = "f4c902c9ae5a2a9d8f84868ad064e706"
//设置请求头
axios.defaults.headers.post["Content-type"] = "application/json"

axios请求页面代码

this.$axios.post("/apis/test/testToken.php",data).then(res=>{
        console.log(res)
})

源码地址: 从这里飞过去

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94249.html

解决vue-axios和vue-resource跨域问题

摘要：个人博客同步文章最近在学习，在中没有，而是利用和进行数据通信。问题在使用的请求时出现跨域问题。这个非常重要，困惑了自己好久设置代理解决跨域问题后注释掉解决跨域问题同一样设置代理方法，不过不需要特别声明中的内容了。个人博客同步文章 https://mr-houzi.com/2018/02/... 最近在学习vue，在vue中没有ajax，而是利用vue-resource和vue-ax...

nanfeiyan 2019-08-22 14:52 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

Taonce 2019-08-20 16:49 评论0 收藏0
vue2.0写的V2EX社区

摘要：按照如下配置可通过解决跨域问题。但是这个不行，已亲测豆瓣可以实现跨域，不知道是不是提供的是情况。本地开发解决跨域终极方法仅仅适用于开发环境安装谷歌插件即可地址 v2ex A vue.js project for V2EX 预览图首页 showImg(https://segmentfault.com/img/remote/1460000008631284); 主题 showImg(ht...

tinyq 2019-08-21 11:34 评论0 收藏0
axios异步请求数据的简单使用

摘要：使用模拟好后端数据之后模拟数据的使用参考，就需要尝试请求加载数据了。数据请求选择了，现在都推荐使用。规定要发送到服务器的数据。布尔值，表示请求是否异步处理。要求为类型的参数，请求成功后调用的回调函数。在一个中重写回调函数的字符串。使用Mock模拟好后端数据之后（Mock模拟数据的使用参考：https://segmentfault.com/a/11...），就需要尝试请求加载数据了。数...

forsigner 2019-08-23 14:40 评论0 收藏0