使用webpack服务器代理设置规避跨域AJAX请求

我们如何编写webpack配置，允许我们在www.example.com/api/books域/ url上执行成功的AJAX（获取）请求，该域没有CORS设置/启用？基于this question。使用webpack服务器代理设置规避跨域AJAX请求

我从域得到的错误是：No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试了加入这个对象来我webpack.base.conf.js文件：

proxy: { 
     '/api': { 
     target: 'http://www.example.com', 
     secure: false 
     } 
    }

和改编自我的HTTP URL根：

Vue.http.options.root = 'http://www.example.com/api/'

发送至：

Vue.http.options.root = '/api/'

但它似乎没有我的AJAX请求时予以考虑：

GET http://localhost:8080/api/public/v1.0/lists/movies/in_theaters.json (Not Found)

来源

2016-10-26 George Katsanos

“我试图添加此对象”...然后发生了什么？ – Quentin

@DaveNewton：我正在尝试设置一个反向代理，以便服务器认为我正在从他的域发出请求。或者至少这是我的理解。 –

@Quentin：我从我的JS框架中删除了absolut url，并对api/..执行了请求，但是我的代理设置未被使用，所以请求发生在http：// localhost：8080/api上，而不是http：//www.example.com/api ... –

我发现这个问题。

我的Webpack配置通过一个index.js文件加载它的配置，该文件包含所有module.exports = { }。

在那里，我发现了一个proxyTable空对象，其中我说：

dev: { 
    env: require('./dev.env'), 
    port: 8080, 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 
    proxyTable: { 
     // proxy all requests starting with /api to jsonplaceholder 
     '/api': { 
     target: 'http://api.example.com', 
     changeOrigin: true, 
     } 
    } 
},

然后我做了我的AJAX请求相对/api/whatever路径，他们正在反向代理，以便服务器接受他们。

来源

2016-10-27 12:53:47

使用webpack服务器代理设置规避跨域AJAX请求

回答

相关问题