前端跨域问题的解决办法，两种类型

跨域问题是由于同源策略的原因，在协议(HTTP或HTTPS)不同、端口号(8080或8881)不同、主机IP(182.92.178.25或者182.92.178.26)不同时而导致的不能进行数据交换的问题。

当后端没有做跨域时，前端就需要自己配置。

类型一：使用代理服务器的方法：

原理：本机直接向服务器发起请求，服务器发现本机的协议、端口号或主机IP与自己不同，为了安全起见不会将数据响应出去，此时本机创建一个代理服务器，代理服务器在接收本机请求时是不会排斥的，收到请求之后会将请求转发给服务器，而此时代理服务器的协议、端口号或主机IP是自己设置的，也就是与服务器的相同。

方法一：在package.json中最外面的大括号里添加一条属性“proxy”，值为需要转发的协议+IP+端口。

例如：本地为http://localhost:8080，请求的数据在http://182.92.178.25:8880，那么在原来的位置还写成http://localhost:8080，在proxy后面写http://182.92.178.25:8880即可。

该方法优点是方便配置，缺点是只能配置一条转发，不适用于向多个服务器请求数据。

方法二：在src同级(也好像是src子级)下创建名为setupProxy.js的文件，在里面粘贴如下内容：

const proxy=require('http-proxy-middleware')

module.exprot=function(app){
    app.use(
        proxy("api1",{//遇见api1前缀的请求就会触发该代理配置,必须放在端口号后面第一位
            target:"http://localhost:5000",//将带有api1的请求转发到的路径
            changeOrigin:true,//控制服务器收到的响应头中Host字段的值，Host字段标识请求从哪发出的。没太大影响，但最好加上。
            pathRewrite:{'^/api1':''}//重写请求路径，将路径中的api1给清除
        }),
        proxy("api2",{//可以配置多个代理，
            target:"http://localhost:5001",
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
    )
}

该方法缺点是配置较为麻烦，但优点是可以配置多重代理，可以转发任意数量的服务器。

方法三：在 根目录/config/config.js中写上如下配置：

proxy: {
  '/api': {//遇见api前缀就会触发该代理
    target: 'http://8.141.88.60:8000',//要转发的代理
    changeOrigin: true,//控制服务器收到的响应头中Host字段的值，Host字段标识请求从哪发出的。
  },
},

该方法是方法一和方法二的综合体，配置简单，并且可以配置多条代理。

类型二：nginx反向代理

如果是前端同学自己部署前端项目，并且服务器与后端不同时会用到这种方法，因为当项目上线之后，就不会走原来代码中配置的代理，所以，就需要使用nginx进行反向代理。前端同学想要学习部署项目的话可以看：阿里云+Xshell部署前端项目，从准备工作到部署成功，亲测详解，小白友好型_阿里云服务器部署前端代码-CSDN博客

 下方为整个nginx配置，反向代理部分已经标注出来，需要复制粘贴的话可以将文字部分删除。

server {
    listen       8880;
    server_name     localhost;

    location / {
        root /web/html1/dist;
        try_files $uri $uri/ /index.html;
        index index.htm index.html;
    }
    #这一块就是反向代理的操作，可以看出来这和使用代理服务器还是很像的
    location /api {#在路径中遇到api时进行转发
        proxy_pass http://8.141.88.60:8000;#转发路径
    }

    error_page 404 /404.html;

    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

注意：同一种方法不一定适合所有情况，这边只提供了三种我遇到过的情况，同学们可以逐个尝试一下。