Iview-admin: 你们的工具方法util.ajax关于跨域问题

[YTU94]

原本我是想在webpack.dev.config.js添加proxy的配置，让后自己封装axios,可是技术菜也不知道哪里出了问题，让后看到你们处理ajax的封装，想问下这里有用代理来跨域，或者有什么跨域的方法，谢谢！

[dolphinfine]

同问。

[YTU94]

我模仿vue-cli在webpack.base.config.js添加了http-proxy-middleware插件的设置，进行跨域请求的代理，想提PR,不知道大大同不同意(●'◡'●)。

[icarusion]

查一下 webpack-dev-server 的文档

[YTU94]

我查了webpack-dev-server,还有http-proxy-middleware插件文档，问题解决了，就是想你们会不会需要加上这个，毕竟开发环境中跨域还是需要的吧.

[lison16]

业务有需求的话可以自行加入。

[YTU94]

好的。

[YTU94]

我在webpack.base.config.js中添加了
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
stats: { colors: true },
port: '8081',
proxy: {
'/api': {
target: 'http://yuanhang.youledi.cn',
pathRewrite: {'^/column' : '/column'},
changeOrigin: true
}
}
}
让后axios 或者用你的util.ajax请求加‘/api’总是404能帮忙看看吗，谢谢。

[YTU94]

@dolphinfine 你的proxy跨域问题解决了吗

[dolphinfine]

@YTU94 我目前正在开发静态页面。还没有搞这个

[dolphinfine]

@YTU94 你改成这样：pathRewrite: {"^/api" : ""}试试。明显这里错了。或者去掉这句。api代替的是http://yuanhang.youledi.cn，

[YTU94]

@dolphinfine 不行哦，总是提示404,也不知道路劲哪不对，fuck

[YTU94]

分享加我的解决方法：
在webpack.dev.config.js中module.exports添加如下devServer。因为作者在package.json做了一些关于webpack-dev-server的基础配置如下：

"scripts": {
    "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config build/webpack.dev.config.js",
  },

所以devServer只要添加proxy配置就好了，如下：

devServer: {
        port: 8089,
        proxy: {
          '/api': {
            target: 'http://yuanhang.youledi.cn/',
            pathRewrite: {'^/api' : ''},
            changeOrigin: true
          }
        }
    }

详细可以看webpack-dev-server文档:http://webpack.github.io/docs/webpack-dev-server.html

[dolphinfine]

@YTU94 赞一个。我已经按照这个配置成功了。

[ShawshankLin]

跨域还是服务端做比较方便~~

[codeItachi]

@YTU94 我的为啥还是404

[YTU94]

@codeItachi 404可能是路劲的问题，你注意下路径中 /，有的地方是需要的

[vikholdon]

axios跨域吗？
axios.create({
baseURL: ajaxUrl,
timeout: 30000,
withCredentials: true//注意是这个配置
});
首先你像我这样上面加一个配置
然后服务端开启一个运行跨域的配置，我的服务端是springboot的，
添加一个配置：
@Configuration
public class CorsConf {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/");
registry.addMapping("/api//");
registry.addMapping("/auth/");
registry.addMapping("/common/**");
}
};
}
}

[ChasLui]

我的服务是通过ssh隧道映射到本机的127.0.0.1:8090端口的 , webpack开发服务器已经修改成

devServer: {
        port: 8089,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8090/',
                secure: false,
                changeOrigin: true,
                pathRewrite: {'^/api': ''}
            }
        }
    }

控制台还是会报错

Failed to load http://127.0.0.1:8090/api/userinfo/index: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8089' is therefore not allowed access.
createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

但是network当中发现已经请求成功了,请大神指导,
而且发现/api并没有被替换成'',请求成功的地址还是http://127.0.0.1:8090/api/userinfo/index

[011011100010110101101111]

@YTU94 已按照此方法解决

[kevin70]

@ChasLui 你不应该访问http://127.0.0.1:8089/api/userinfo/index 这个代理地址吗
如果你还是需要访问8090的端口，那请在8090的服务做 CROS 的配置就好了。

[ChasLui]

@kevin70 感谢,最后开发代理还是没配置成功,最后是只能配CROS解决了

[WenTao-Love]

我配置了devServer 代理信息，直接在浏览器输入代理地址可以访问，用util.ajax去访问就报错了。Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403.

已经被折腾好几天了，被叼了。😔

[WenTao-Love]

奇了个怪，用util.ajax会报错，反而直接用axios就没有报错。求解答

[YTU94]

你看看我写的那样，实在不行贴出你的代码，不然谁知道你什么问题

[longzhou123]

用火狐浏览器的cors插件

[Joseph244]

跨域配置和允许局域网访问配置可以按照下面方法一并解决
在webpack.base.config.js中与plugins同一级增加下面代码：
devServer: {
host: '0.0.0.0',
port: 8089,
proxy: {
'/api': {
target: 'http://127.0.0.1:8090/',
changeOrigin: true
}
}
}

在package.json中修改scripts对象中的dev为：（增加了--disable-host-check ）
"dev": "webpack-dev-server --disable-host-check --content-base ./ --open --inline --hot --compress --config build/webpack.dev.config.js",

[xzghua]

我的终于解决了! https://www.iphpt.com/detail/125/ 你们参考参考

[hanpanapn]

http-proxy-middleware

怎么解决的？有代码吗？