vue-cli3跨域配置的简单方法

vue-cli3跨域配置：

在vue-resource的数据请求中，一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域。

但是对于只支持GET/POST两种请求方式的api，修改jsonp，就会出错。需要进行跨域的配置。

(1)在文件根目录下，创建vue.config.js配置文件，具体配置如下：

module.exports={

//将baseUrl：'/api',改为baseUrl：'/'
baseUrl:'/',
devServer:{
  '/api':{
    target:'http://apis.juhe.cn/',
    changeOrigin:true,
    ws:true,
    pathRewrite:{
      '^/api':''
    }

  }
}}

(2)在文件根目录下,创建.env.development 用作开发环境变量设置。

在.env.development文件下设置变量 VUE_APP_BASE_API=/api 即可将devServer的proxy重写的url赋值给VUE_APP_BASE_API

(3)读取配置的变量，通过process.env.VUE_APP_XX(process.env.VUE_APP_BASE_API)来读取。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Vue-cli3.x + axios 跨域方案踩坑指北

    缘起 最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个PHP版的实现,所以想把PHP写的功能整理成一个服务,然后在前端调用.但是这个项目是JavaWeb,也就是说我需要面对跨域的问题.不过本篇文章,讲的并不是如何解决这样的跨域问题,而是我在找如何解决这个问题的路上遇到的坑. 其实,在前端工程化大行其道的现在,前后端已经分离开来,前端为了提高工作流效率往往自己开一个小型的服务器,就比如webpack.devServer.这样在前端调用后端接口的时候必然

  • vue-cli3配置与跨域处理方法

    安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 . npm uninstall vue-cli -g 2. 检查 node.js 版本. vue-cli3 需要 node 版本大于8.9.在cmd中输入 node -v 查看版本.如果版本过低,请先去 node官网 中下载高版本. 安装脚手架 vue-cli3的包名有 vue-cli 改为 @vue/cli . 使用npm全局安装vue-cli3. npm inst

  • 详解vue-cli3 中跨域解决方案

    此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批) 前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器. 0:前提条件 1:安装vue-lic 2:安装axios  用于发送请求. 1:将任何未知请求转发到代理服务器 如: 前端地址:127.0.0.1 后端地址:127.0.0.2 当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api module.exports={

  • vue-cli3跨域配置的简单方法

    vue-cli3跨域配置: 在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域. 但是对于只支持GET/POST两种请求方式的api,修改jsonp,就会出错.需要进行跨域的配置. (1)在文件根目录下,创建vue.config.js配置文件,具体配置如下: module.exports={ //将baseUrl:'/api',改为baseUrl:'/' baseUrl:'/', devServer:{ '/api':{ targ

  • vue 处理跨域问题及解决方法小结

    当你在发送网络请求的时候,出现以下保存信息,恭喜你跨域了 Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked by  CORS policy: Response to preflight request doesn't pass access control check:  No 'Access-Control-Allow-Origin' header is present on the reques

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • vue实现跨域的方法分析

    vue实现跨域的方法分析

    本文实例讲述了vue实现跨域的方法.分享给大家供大家参考,具体如下: 在请求的资源上没有"访问控制允许源"标头.因此,"http://LoalHoal:8081"是不允许访问的. 出现这个报错就说明,浏览器限制了跨域,需要设置跨域 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方

  • vue 本地环境跨域请求proxyTable的方法

    主要在config->index.js中配置 proxyTable: { '/gameapi': { changeOrigin: true, // target: 'http://rap.id.cn/mockjs/20', mock地址 target: 'http://192.168.1.124',服务器地址 pathRewrite: { '^/gameapi': '/gameapi' }, secure:false } } 因此,发送请求时候url写为('/gameapi/gift-apply

  • ThinkPHP 5.1 跨域配置方法

    因为最近的项目采用了API接口开发方式,后端需要配置跨域的规则以便前端能够访问. 系统采用的框架为 ThinkPHP,版本 5.1.19 关于OPTIONS请求 由于前端的知识不是很熟悉,查阅了网上的资料得知,OPTIONS 请求是在 AJAX 发送请求前发送的一个验证请求,该请求会验证一系列规则,若符合规则则会发送实际的 GET 或 POST 请求,跨域的规则也是 OPTIONS 请求时进行验证的. 遇到的问题 按照网上大部分关于跨域请求的配置,基本都是以下三行代码: header("Acce

  • nginx 配置跨域失效修复的方法示例

    nginx 配置跨域不生效 如下配置 server { listen 80; server_name localhost; # 接口转发 location /api/ { # 允许请求地址跨域 * 做为通配符 add_header 'Access-Control-Allow-Origin' '*'; # 设置请求方法跨域 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 设置是否允许 co

  • Springboot 跨域配置无效及接口访问报错的解决方法

    跨域配置如下,Springboot 版本为 2.4.1 ///跨域访问配置 @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.setAllowCredentials(true); //sessionid 多次访问一致 co

  • node后端与Vue前端跨域处理方法详解

    目录 node.js后端跨域解决方案 前端vue项目 前端axios请求 node.js后端跨域解决方案 先看后端的入口文件: app.js const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors') const expressJWT = require('express-jwt') const app = express(); const

  • 关于SpringBoot与Vue交互跨域问题解决方案

    关于SpringBoot与Vue交互跨域问题解决方案

    目录 浏览器同源策略 一.VUE前端配置代理解决跨域 (1)Vue中让浏览器请求携带cookie (2)vue中配置代理解决跨域 第一步,设置统一访问路径 第二步.配置跨域代理 第三步.测试请求 二.springboot后端配置解决跨域 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 浏览器同源策略 为什么会出现跨域问题? 首先一个定义一定要了解,就是浏览器的同源策略, 什么是浏览器的同源策略, 简单来说就是浏览器发送请求的协议.域名和端口要和服务器接收请求的协议.域名以及端口一致.

随机推荐