Vue如何解决跨域

看到这个问题我们不禁会想为什么会出现跨域？什么是跨域?

一、什么是跨域？为什么会出现跨域？

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个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；
  现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的Vue，后端使用的NodeJs。

二、常用的解决跨域的方法

第一种方法：通过后台设置header请求头：

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

第二种方法: 使用JQuery提供的jsonp 通过script标签中的src属性来解决，因为src属性不受同源策略影响

1.下载jq

cnpm install jquery --save-dev

2.在webpack.base.conf.js文件中加入

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

3.可以在所需的组件中引入也可以在main.js中全局引入

import $ from 'jquery'

组件代码块：

<template>
  <div class="source">
      source{{data}}
  </div>
</template>

<script>
import $ from 'jquery'
  export default({
    name:"source",
    data(){
      return{
        data:""
      }
    },
    created(){
      this.getData()
    },
    methods:{
      getData () {
        var self = this
        $.ajax({
          url: '你要请求的url',
          type: 'GET',
          dataType: 'JSONP',
          success: function (res) {
            self.data = res.result
          }
        })
      }
    }
  })
</script>

第三种方法：使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
这种方法是通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，
由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。

1.打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: '', //写上源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': '' //路径重写 
      } 
  } 
}

2、使用axios请求数据时直接使用“/api”

getData () { 
 axios.get('/api/+地址', function (res) { 
   console.log(res) 
 })

大家还有什么宝贵意见欢迎指出！！