Vue跨域Access to XMLHttpRequest at

跨域提示信息

Access to XMLHttpRequest at 'http://192.168.1.2:9090/api/bbs/bbs/art/' from origin 'http://localhost:8083' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

• 这里列举一个经典的列子：

#协议跨域
http://a.baidu.com 访问 https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080 访问  http://a.baidu.com:80；
#域名跨域
http://a.baidu.com  访问  http://b.baidu.com；

解决跨域方法

• 1.前提这里是使用vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件

module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://192.168.1.2:9090', //后端接口地址
                changeOrigin: true,  //是否允许跨越
                pathRewrite: {
                    '^/api': '/api',        //重写,
                }
            }
        },
 host: 'localhost',   //本地ip
 port: 8083,
            ...

后端请求地址是http://192.168.1.2:9090，所有api的接口url都以/api开头。
所以首先需要匹配所有以/api开头的.然后修改target的地址为http://192.168.1.2:9090。
最后修改pathRewrite地址:将前缀'^api'转为'/api'。
如果本身的接口地址就有'/api'这种通用前缀，就可以把pathRewrite 删掉。注意这个方式只能在开发环境中使用。

• 2.在main.js文件，配置一下axios.defaults.baseURL = '/api'这样就可以保证动态的匹配生产和开发环境的定义前缀了，代码如下:

/*
入口JS
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'        //关键代码
Vue.config.productionTip = false

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

3.组件中axios请求数据使用：

<template>
 
</template>

<script>
    import Footer from './components/Footer/Footer.vue'
    export default {
        created() {
            const url = '/api/bbs/bbs/art'
            this.$axios.get(url).then(res => {
                console.log(res)
            })
        },
    }
</script>

4.重新启动项目之后，已经解决了跨域问题