Vue跨域解决方法

科林-Colin 等级 383 0 0

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

要想本地正常的调试,解决的办法有三个

一、后台更改header

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

这样就可以跨域请求数据了。

二、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)

methods: { 
  getData () { 
    var self = this 
    $.ajax({ 
      url: 'http://f.apiplus.cn/bj11x5.json', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(',') 
      } 
    }) 
  } 
} 

通过这种方法也可以解决跨域的问题。

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

例如请求的url:“/business/remind/user”
1、打开vue.config.js.js,在proxy中添写如下代码:

// 运行配置
    devServer: { 
        port: '9527', //代理端口
        open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
        proxy: {
            '/api': {
                target: process.env.VUE_APP_HTTP_URL,
                changeOrigin: true, //是否跨域
                pathRewrite: { //重写路径
                    '^/api': '/'  // 或 者 'http://localhost:8080/api'
                }
                // 既然我们设置了代理,则所有请求url都已写成/api/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
                // 因此这里的意义在于, 以 /api开头的url请求,代理都会知道实际上应该请求那里,
                // ‘我是服务器/api’,后面的/api根据实际请求地址决定,即我的请求url:/api/test/test,被代理后请求的则是
                // https://我是服务器/api/test/test
            }
        }
    }, 

附带vue.config.js下的代码

const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)

}
module.exports = {
    // 没有书写outputDir属性   默认'dist'  对应dev.assetsSubDirectory
    outputDir: 'dist',
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    //在vue-cli.3.3版本后 baseUrl被废除了,因此这边要写成 publicPath ( 资源地址 )
    publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' , 
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {}
        // 启用 CSS modules for all css / pre-processor files.
        // modules: false
    },
    // 运行配置
    devServer: { 
        port: '8222', //代理端口
        open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
        proxy: {
            '/api': {
                target: process.env.VUE_APP_HTTP_URL,
                changeOrigin: true, //是否跨域
                pathRewrite: { //重写路径
                    '^/api': '/'  // 或 者 'http://localhost:8080/api'
                }
                // 既然我们设置了代理,则所有请求url都已写成/api/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
                // 因此这里的意义在于, 以 /api开头的url请求,代理都会知道实际上应该请求那里,
                // ‘我是服务器/api’,后面的/api根据实际请求地址决定,即我的请求url:/api/test/test,被代理后请求的则是
                // https://我是服务器/api/test/test
            }
        }
    },
    chainWebpack: config => {
        // 提示输出的哪个地址
        console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') + 
                    chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
        // 判断不同环境 做相应处理           
        if(process.env.NODE_ENV === 'production') {
            // 测试生产环境, 不压缩js代码
            if (process.env.VUE_APP_TITLE === 'alpha') {
                config.optimization.minimize(false)
            }
        }
        //set第一个参数:设置的别名,第二个参数:设置的路径
        config.resolve.alias
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 没必要配置

        config.plugin('html')
        .tap(args => {
            args[0].title = '公募综合业务平台'
            return args
        })
    }
} 

本文转自 https://www.jianshu.com/p/c3f92a904696,如有侵权,请联系删除。

收藏
评论区

相关推荐

Cors跨域解决
一、浏览器跨域问题产生 1、跨源资源共享(CORS)中文文档: https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS 2、什么是浏览器跨域问题 指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
Vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'AccessControlAllowOrigin' header is present on the requested resource.” 这种跨域错误。 要想本地正常的调试,解决的办法有三个:
Chrome 中 Set-Cookie SameSite 问题
关于 “Chrome 修改对未设置 SameSite 的 cookie,视作 SameSite:Lax 处理的变更” 的问题,目前看,最妥善的解决方案还是按照规矩办事儿,目前 Chrome 是行动最快的,而 FireFox 和 Edge 也在积极跟进,持支持态度。 影响范围: 如果你的项目中有如下跨域场景: 1. 跨域的 ajax
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
前后端分离的情况下,vue保存cookie时碰到的坑! (axios.defaults.withCredentials = true;)
文章目录 一号坑问题描述当我们的项目是前后端分离的模式时,vue不会自动帮我们保存后端传来的cookie!解决方案我们需要在main中添加axios.defaults.withCredentials true 二号坑问题描述如果你之前处理过跨域方面的问题,应该会记得你曾经在后端请求头添加
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
前端容易理解错的跨域原理
前言关于跨域这件事,自从我遇到后,了解一下,这事就过去了。我也一直认为这是个小问题,大家应该都懂。直到我要教妹妹前端时遇上这个问题才发现,这个问题得整个逻辑讲出来其实还挺绕的。知道问题怎么解决很简单,但是要讲清楚问题为什么出现就十分复杂了。那么我突然就好奇了,大家是都懂这个逻辑了嘛。所以我在几个交流群里问了一个问题 为什么很多人都出现本地环境会跨域而线上环境
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注