使用proxy进行反向代理解决跨域

跨域问题 我们一般都是让后端来解决

因为他们解决起来比我们要容易

只需要加一行响应头代码 httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域

对后端还不是很了解 欢迎指正

如果需要前端来解决跨域的话 我们可以使用 jsonp以及proxy反向代理拦截

下面就是proxy反向代理解决跨域的方法 

使用propx进行反向代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:7788',
        ws: true,
        changeOrigin: true,
        pathRewrite:{ //路径重写
             '^/api':''
         }
      },
      
      '/foo':{
          target:'http://localhost:3001'
      }
    }
  }
}

示例：

npm install axios

//src/http/index.js

import axios from "axios";
​
const http = axios.create({
    baseURL: 'http://www.chenfuguo.cn:3000',
})
​
export default http

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
​
import http from './http/index.js' //导入axios
​
Vue.config.productionTip = false
Vue.prototype.$http = http //使用axios
​
new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')
​

homeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <button @click="getData">请求按钮</button>
  </div>
</template>
​
<script>
export default {
  name: 'HomeView',
  components: {},
  methods: {
    async getData() {
      let { data: res } = await this.$http.get('/getCity')
      console.log(res)
    }
  }
}
</script>
​

点击，请求 ，产生跨域

利用devServer解决跨域

1、根目录下，建 vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.chenfuguo.cn:3000', // 需要跨域的目标网址
                changeOrigin: true,
                pathRewrite: { //路径重写
                    '^/api': ''
                }
            }
        }
    }
}
​
​

2、在src/http/index.js下，把跟路径改为/api

import axios from "axios";
​
const http = axios.create({
    // baseURL: 'http://www.chenfuguo.cn:3000',
    baseURL: '/api',
})
​
export default http

搞定！