解决vue.js资源跨域调用

浏览器跨域调用访问报错如下 ：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:11000' is therefore not allowed access.

原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。

 

解决方法：

proxyTable是什么？
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js， 基本原理是用服务端代理解决浏览器跨域：

 cms跨域解决原理：

1、访问页面http://localhost:11000/
2、页面请求http://localhost:11000/cms
由于url由http://localhost:31001/cms...改为“http://localhost:11000/cms."，所以不存在跨域

3、通过proxyTable由node服务器代理请求 http://localhost:31001/cms.
服务端不存在跨域问题
具体的配置如下：

1）设置http代理中间件代理访问的url

/**
 * 配置需要http代理中间件代理访问的url地址
 * http代理中间件是node.js实现的服务
 */
var sysConfig = {
    xcApiUrlPre: '/api',
    xcApiUrl: 'http://localhost:31001/',
    imgUrl:'http://localhost:31001/',
    videoUrl:'http://localhost:31001/',
    openAuthenticate:true,
    openAuthorize:true
}

module.exports = sysConfig

2）修改api方法中url的定义

     请求前加/api前缀

//public是对axios的工具类封装，定义了http请求方法 
import http from './../../../base/api/public' 
let sysConfig = require('@/../config/sysConfig') 
let apiUrl = sysConfig.xcApiUrlPre; 

//导出page_list方法
export const page_list = (page,size,params) => { 
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)
 }

3）在config/index.js下配置proxyTable。

      以/api/cms开头的请求，代理请求http://localhost:31001

  '/api/cms': {     
    target: 'http://localhost:31001',     
    pathRewrite: {     
      '^/api': ''//实际请求去掉/api      
   }

这样，所有以/api/cms开头的请求，都会被http代理中间件代理请求到指定的url地址
 

 

实现原理：

  vue.js的跨域访问问题，由node.js将请求代理转发到目标接口，node.js再将目标接口的响应数据转发回给vue.js。

    因为node.js是服务端(http-proxy-middleware代理中间件就是由node.js实现的服务中间件），服务端与服务端之间不存在资源跨域调用问题。