一、vue跨域问题展示：

二、问题描述：

1. 原理

跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性，而我们常见的网址一般包括协议, 域名, 端口几个部分, 在浏览器的同源策略下,协议不同 域名不同 端口不同都会出现跨域。

2. 本人具体问题

​ 1、vue前端与后端部署端口不同导致请求后端api时产生跨域问题

​ 2、在使用vue前端想使用腾讯云存储的文件的url直接下载文件时产生跨域问题

​ 3、于百度上寻求解决方案。

三、解决方案：

1、vue端修改vue.config.js文件

在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域，但本人设置后未成功，可能是由于本人有其他设置导致。

module.exports = {
    devServer: {
      port:8080, //设置项目端口号这是vue项目端口
      host: "0.0.0.0", //允许所有的主机访问当前项目
      proxy: {
            '/api': { //正则匹配到以这个开头的时候 就用代理
              target: "http://xxxx:xxxx",// 指向的是目标服务器
              changOrigin: true,  //允许跨域
              pathRewrite: {
                  '^/api': ""
              }
          }
      }
  }
}

设置后当需要请求跨域的地址即target的值时，需在请求的url前加上匹配的头，即例子中的‘/api’

2、具体请求处使用jsonp

jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制(你可以在你的网页中设置script的src属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据，请求时添加一个参数为callbakc=?，?号时你要执行的回调方法。因不符合本人需求，本人未尝试。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    // 服务器返回的数据会放到回调函数里面
    function getData(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

也可使用Jquery ajax实现

$.ajax({
  url: 'http://www.test.com:8888/getData',
  type: 'get',
  dataType: 'jsonp',  // 请求方式为jsonp
  jsonpCallback: "handleCallback",    // 自定义回调函数名
  data: {}
})

3、服务端解决

1. 服务端代理

例如http://www.123.com/index.html需要调用http://www.456.com/server.php，可以写一个接口http://www.123.com/server.php，由这个接口在后端去调用http://www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

2. 服务端设置请求头

在网上查询时说只需设置 Access-Control-Allow-Origin 即可，但本人尝试后无效，于是设置了很多结果成功了。此处解决了本人的问题1，即访问后端api问题。

c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
c.Header("Access-Control-Allow-Credentials", "true")

4、文件存储服务器端解决

该项为请求文件存储服务器上的文件时产生的跨域问题解决方案。

解决方式为到对应文件存储服务器上设置跨域访问CORS设置，本人使用的是腾讯云对象存储，将讲解腾讯云存储桶设置方案。

（1）进入到自己要设置跨域设置的存储桶，单击【安全管理】页签，下拉页面即可找到“跨域访问 CORS 设置”。

（2）单击【添加规则】，添加第一条规则，使用最宽松的配置如下：

添加规则后重新请求存储桶文件，结果可正常请求到文件。