vue.js 怎么解决跨域？

Question

以前跨域的问题我只在访问本地照片的时候遇到过，后来用 node.js 开端口，网站放到服务器上运行也没遇到跨域的问题，直到今天的实验作业丢了个接口出来，我用 axios 一连，竟然有跨域问题？求大佬解决一下（由于已经有人试过这个接口，所以这个接口肯定是能用的）

axios.get("http://xxxxxxxxx/goods/list")
    .then(res => {
      this.products = res.data;
      this.count = new Array(this.products.length).fill(0);
      this.check = true;
    }).catch(err => {
      console.log(err);
    })

Answer 1

这里我只推荐这两种方式跨域，其它的跨域方式都还有很多但都不推荐，真心主流的也就这两种方式。

开发环境	生产环境
cors	cors
proxy	nginx

方案一：cors 全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求（也不是所有请求都会发送 options， cors），通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下，再以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。

方案二：在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便，参照 文档 就会使用了。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是 proxy 和 nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境

• 本地开发的话如果你是框架之类的，直接使用proxy进行代理即可
• 如果没有使用框架以及webpack之类的，最简单的就是禁用谷歌浏览器的安全策略

生产环境

生产环境的话还是比较推荐nginx的

• nginx

比如后端地址为http://localhost:8089/mall_war/*.do
那么前端在代码里只需要访问/mall_war/*.do就可以，默认发的是部署服务器的ip来访问
然后再nginx里配置如下

server {
    listen       8066;
    server_name  commonFronted;
    # 项目静态资源目录
    location / {
        alias     /xxx/dist;
        index     index.html;
    }

    location ^~/mall_war/ {
        proxy_pass http://localhost:8089/mall_war/;
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Proto https;
        proxy_set_header  X-NginX-Proxy true;
        proxy_buffers 256 4k;
        proxy_max_temp_file_size 0k;
        proxy_connect_timeout 30;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_next_upstream error timeout invalid_header http_502;            
    }
}

• 让后端支持cors请求，但是这种不是很乐观，我一般懒得和后端说，碰上不懂的简直浪费时间

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

一切前端跨域都是扯淡，跨域还得看服务端

Answer 3

代理proxy可以解决。当然还有一个有点酸爽的办法,那就是禁用浏览器跨域。详见

文章

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 4

前端跨域，亘古不变的话题，解决方式很多种

• 方法一：proxy

  • vue.config.js

  module.exports = {
   devServer: {
    proxy: {
      "/prefix": {
        target: "targetDomain",
        changeOrigin: true,
        pathRewrite: {"^/prefix": ""}
      }
    }
  }
  }

• 方式二：nginx

  • nginx.conf

  location /prefix {
    proxy_pass targetDomain
  }

• 方式三：jsonP
  详见：JSONP跨域详解

• 方式四：hosts代理

  通过改变hosts进行信任调用，设置与后台同domain即可

• 还有更多方式，不再进行过多复述，在Vue.js项目中，通常是使用 proxy 以及 nginx转发的多，本地运行使用 proxy 编译之后，采用 nginx进行转发