专栏首页Kirin博客vue vuecli3 前端解决跨域问题

vue vuecli3 前端解决跨域问题

一、什么是跨域

1、跨域

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

2、同源策略

是指协议,域名,端口都要相同,其中有一个不同都会产生跨域,在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

3、跨域问题怎么出现的

开发一些前后端分离的项目,比如使用 SpringBoot + Vue 开发时,后台代码在一台服务器上启动,前台代码在另外一台电脑上启动,此时就会出现问题。 比如:

后台 地址为 http://192.168.70.77:8081 前台 地址为 http://192.168.70.88:8080 此时 ip 与 端口号不一致, 不符合同源策略,造成跨域问题。

二、使用 axios 演示并解决跨域问题(vue-cli3.0)

1、项目创建、与 axios 的使用

(1)step1:创建 vue 项目 参考 https://www.cnblogs.com/l-y-h/p/11241503.html

(2)step2:使用 axios

参考 https://www.cnblogs.com/l-y-h/p/11656129.html

2、跨域问题重现

(1)step1:删去 vue 项目初始提供的部分代码

(2)step2:使用 axios

【App.vue】
<template>
    <div>
        <button @click="testAxios">TestAxios</button>
    </div>
    <!--App -->
</template>

<script>
    // 引入axios
    import Axios from 'axios'

    export default {
        methods: {
            testAxios() {
                const url = 'https://www.baidu.com/'

                Axios.get(url).then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                }).catch(err => {
                    alert('请求失败')
                })
            }
        }
    }
</script>

<style>

</style>

此时点击按钮,会出现跨域问题。

(3)常见错误解决

【question1:】
 'err' is defined but never used (no-unused-vars)
 
 这个问题,是由于 vue 项目安装了 ESLint 。
 
 暴力解决:直接关闭 ESLint
 在  package.json 文件中 添加 
 "rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
}

3、解决跨域问题

(1)step1:配置 baseURL 可以自定义一个 js 文件,也可以直接在 main.js 中写。

【main.js】
import Vue from 'vue'
import App from './App.vue'
// step1:引入 axios
import Axios from 'axios'

Vue.config.productionTip = false

// step2:把axios挂载到vue的原型中,在vue中每个组件都可以使用axios发送请求,
// 不需要每次都 import一下 axios了,直接使用 $axios 即可
Vue.prototype.$axios = Axios

// step3:使每次请求都会带一个 /api 前缀 
Axios.defaults.baseURL = '/api'

new Vue({
  render: h => h(App),
}).$mount('#app')

(2)step2:修改配置文件(修改后要重启服务) vue 3.0 通过 vue.config.js 文件 修改配置(若没有,则直接在项目路径下新建即可)。

【vue.config.js】
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                // 此处的写法,目的是为了 将 /api 替换成 https://www.baidu.com/
                target: 'https://www.baidu.com/',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

(3)step3:修改 axios 使用方式

【App.vue】
<template>
    <div>
        <button @click="testAxios">TestAxios</button>
    </div>
    <!--App -->
</template>

<script>
    export default {
        methods: {
            testAxios() {
                // 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
                // 由于 main.js 里定义了每个请求前缀,此处的 / 即为 /api/, 
                // 经过 vue.config.js 配置文件的代理设置,会自动转为 https://www.baidu.com/,从而解决跨域问题
                this.$axios.get('/').then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                }).catch(err => {
                    alert('请求失败')
                })
            }
        }
    }
</script>

<style>

</style>

重启服务后,点击按钮,可以成功访问。

提示:每次修改vue.config.js 文件需要手动重启服务器才会生效,不然还是读取的缓存url

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue路由的懒加载

    kirin
  • vue normalize.css使用

    1、Normalize.css只是一个很小的css文件,但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normali...

    kirin
  • vue 项目局域网访问项目

    “serve”: “vue-cli-service serve “,  // 原本是这样的

    kirin
  • CoreText实现图文混排之尺寸估算及文本选择

    回头看看,距离CoreText系列首发过去一年也多了,看到第一篇文章即将超越1.3W的点击量老司机也是压力越来越大,毕竟作为瞎逼逼杰出代表的老司机偶尔也要正经一...

    老司机Wicky
  • 速读原著-TCP/IP(TFTP安全性)

    注意在T F T P分组(图1 5 - 1)中并不提供用户名和口令。这是 T F T P的一个特征(即“安全漏洞”)。由于T F T P是设计用于系统引导进程,...

    cwl_java
  • 最强读心术!脑波直接转语音,你的秘密已无处藏身 | Nature子刊

    有,用万能的AI啊。最近,Nature子刊Scientific Reports上报道了一项新技术进展:监测一下脑电波,AI就能还原你听到的声音。

    量子位
  • iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star。我去翻看了它的第一...

    Haley_Wong
  • CentOS7.2+OpenStack+kvm 云平台部署--在线调整虚拟机的大小

    注意一点: openstack的虚拟机在线调整大小的原理: 其实就相当于做了一个云主机在不同宿主机(计算节点)之间的迁移,所以前提是至少需要有两个计算节点。...

    菲宇
  • 《计算机图形学基础(OpenGL版)》勘误表

    T2=[cos600∘sin600∘0−sin600∘cos600∘0001]=[−1/2−3/203/2−1/20001]T_2= \left[ \begin...

    步行者08
  • CentOS7.0+OpenStack+kvm云平台部署—配置Nova

    [root@openstack ~]# yum -y installopenstack-nova

    菲宇

扫码关注云+社区

领取腾讯云代金券