一步步教你前端vue项目开发中如何解决跨域问题

开发环境中跨域

名词解释

1、同源策略：

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

2、同源：

所谓同源，就是指协议、域名、端口号，三者都一样就是同源，只要有一个不同就是跨域。

3、跨域：

又非同源策略请求。在浏览器里面域名、端口、IP地址、协议，有任何一项不同，就是跨域。
如：看下面的链接是否与 http://www.test.com/index.html 同源？
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:8090/index.html 不同源 端口不同(8090)
http://www.dyna.com/index.html 不同源 域名不同(dyna)

4、代理服务器：

前端需要发送请求的url为“http://localhost:8080/teach/xxx/xxx”,请求的目标服务器为“http://localhost:8012/teach/xxx/xxx”，前端发送请求，直接请求目标服务器是请求不通的（因为端口不同），所以需要一个中介来处理。前端发送请求，先向本地虚拟服务器发送请求（中介），再由本地虚拟服务器（中介）向目标服务器发送请求，目标服务器返回数据给本地虚拟服务器（中介），本地虚拟服务器（中介）再把接收到的返回数据返给前端发送的请求。这个本地虚拟服务器（中介）就是所谓的代理服务器。

解决方式

JsonP(只能处理get请求)、cors(后端开启)、代理服务器.

项目背景

使用Vue-cli创建的项目，开发地址是localhost:8080,需要访问本机上的后台服务器localhost:8012,相同域名不同端口之间的访问，需要跨域才能正确请求后端接口。跨域的方法有很多，通常都需要后台配置。在开发过程中，由于后台还没有进行跨域的配置，所以前端想要正确请求到后端接口，就需要暂时由前端开发人员解决跨域问题。

跨域配置

项目开发是使用vue-cli脚手架创建的项目，可以直接利用Node.js代理服务器，通过修改vue.config.js配置文件中devServer配置项中的proxy实现跨域请求。

1、配置说明：

devServer:{
    
    
host:'localhost'，  //本地域名
port:8081,//本地端口号
proxy:{
    
    
'/api':{
    
         // "/api"---拦截以“/api”开头的接口地址
target:"http://localhost:3000",//要跨域的域名
changeOrigin：true，//是否开启跨域
pathRewrite：{
    
      //本身的接口地址没有‘/api’,这种通用前缀，所以要rewrite，如果本身有则去掉                 '^/api':' '    //使用'^/api':' '   可以把接口中的虚拟/api去掉。                                   这项
//本身接口中没有/api，使用/api和'^/api':' '的作用：既能拥有正确的跨域标识，又能在请求接口的时候去掉/api。
}
}
}
}

A、参数proxy详解:

vue-cli的config配置文件中的参数：proxy 这个参数主要是一个地址映射表，可以通过设置将复杂的url简化，例如我们要请求的地址是“http://localhost:8080/teach/queryCourseInfoByName”，可以按照如下设置：

proxy: {
    
    
 '/teach': {
    
    
   target: 'http://localhost:8080',
   //pathRewrite: {
    
    
//由于接口中本来就有“/teach”，所以这里不需要配置pathRewtite这项了
   //}
 }
}

这样我们在写url请求的时候，只用写成/teach/queryCourseInfoByName就可以代表“http://localhost:8080/teach/queryCourseInfoByName”了。
那这又是如何解决跨域问题的呢？其实在上面的“/teach”的参数里面有一个changeOrigin参数，接收一个布尔值，如果设置为true，那么本地就会虚拟一个服务端接收我们发送的请求并代替转发该请求，这样就不会有跨域问题了，这只适用于开发环境。

B、pathRewrite详解：

用代理，首先得有一个标识，告诉他我们的这个连接要用代理，不然的话，可能我们的 html，css，js这些静态资源都跑去代理。所以我们只要接口用代理，静态文件用本地。’/api’: {}, 就是告诉node，我接口只要是’/api’开头的才用代理。所以我的接口就要这么写 /api/teach/xx/xx。最后代理的路径就是 http://localhost:8080/xx/xx。可是不对啊，我正确的接口路径里面没有/api，所以此时就需要使用pathRewrite，用’^/api’:’’, 把’/api’去掉，这样既能有正确标识，又能在请求接口的时候去掉api。当然如果本身的接口中就有/api，那么就可以把pathRewrite这个参数去掉。

【注意】
接口地址原本是/teach/queryCourseInfoByName，但为了匹配代理地址，在前面加了一个/api，因此接口地址写成这样才能生效：/api/teach/queryCourseInfoByName。
“/api” 为匹配项，target为被请求的地址，因为在axios的url中增加了前缀“/api”，而原本的接口是没有这个前缀的，所以需要通过pathRewrite来重写地址，将前缀“/api”转为“/”。如果本身的接口地址就有“/api”，就可以把pathRewrite删掉。
在开发过程中，我加上“/api”的初衷是：后端使用微服务，要实现跨域，部署在服务器后前端接口会发生微小调整，需要加上对应微服务的服务名。开发过程中，后端还没有解决跨域问题，前端为了能成功调用接口，为了方便后期的接口地址调整，所以加上了前缀/api，做统一管理。

2、实例：

请求后端接口：/teach/queryCourseInfoByName
跨域请求接口：/api/teach/queryCourseInfoByName

先请求本地接口，然后由代理再向 发起请求。在浏览器中可以看到请求的url为：http://localhost:8080/teach/queryCourseInfoByName,而实际请求的url为：http://localhost:8012/teach/queryCourseInfoByName,中间的端口转发已由代理完成。