Vue跨域解决方法

科林-Colin 等级 703 0 0
标签: vue前端

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,如有侵权,请联系删除。

收藏
评论区

相关推荐

Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
Vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'AccessControlAllowOrigin' header is present on the requested resource.” 这种跨域错误。 要想本地正常的调试,解决的办法有三个:
前后端分离的情况下,vue保存cookie时碰到的坑! (axios.defaults.withCredentials = true;)
文章目录 一号坑问题描述当我们的项目是前后端分离的模式时,vue不会自动帮我们保存后端传来的cookie!解决方案我们需要在main中添加axios.defaults.withCredentials true 二号坑问题描述如果你之前处理过跨域方面的问题,应该会记得你曾经在后端请求头添加
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue axios调用第三方接口跨域解决
1. == 在config目录下index.js文件中设置proxyTable: proxyTable: { '/v1': { target: 'https://api.douban.com', changeOrigin: true, pathRewrit
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue 前端验证码
⭐前言 --- 在vue项目中,登录界面必不可少。简单项目里,验证码通常由数字字母构成。一般有两种产生方式:前端,后端。后端生成,前端直接调用接口,将返回的url放入a标签即可。而前端生成,则大多用canvas画布实现,如何让验证码随屏幕大小变化,还能保持原样不失真,这就是我们要实现的功能。当然,在创建vue项目时,我们必须得克服跨域问题。No '
Vue 组件数据通信方案总结
> 本文首发于政采云前端团队博客:Vue 组件数据通信方案总结 > > https://www.zoo.team ### **背景** 初识 Vue.js ,了解到组件是 Vue 的主要构成部分,但组件内部的作用域是相对独立的部分,组件之间的关系一般如下图: ![](https://oscimg.oschina.net/osc
Vue 项目中各种痛点问题及方案
![](https://oscimg.oschina.net/oscnet/ad4bd1bf-a446-4061-944b-82e4f8fd73ac.jpg) 最近要求使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中常见的问题及解决办法。 * 列表进入详情页的传参问题 * 本地开发环境请求服务器接
Vue+Spring Boot简单用户登录Demo
1 概述 ==== 前后端分离的一个简单用户登录`Demo`。 2 技术栈 ===== * `Vue` * `BootstrapVue` * `Kotlin` * `Spring Boot` * `MyBatis Plus` 3 前端 ==== 3.1 创建工程 -------- 使用`vue-cli`创建,没安装的可以先安装
springmvc加vue实现前后端数据的跨域访问
User.java文件: package com.nf.entity; import javax.persistence.*; @Entity @Table(name = "user", schema = "lib", catalog = "") public class User {
vue 使用axios 出现跨域请求的两种解决方法
最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案。 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:\*”); header(“Access-Control-Allow-Headers:content-type”); header(“Access-Cont