React Axios 解决前端跨域 代理 Proxy

发布时间:2019-06-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React Axios 解决前端跨域 代理 Proxy脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
XMLHttPRequest cannot load http://www.xxx.com/v1. 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:3000' is therefore not Allowed
access.

前端人员在调接口数据的时候遇到这个问题是不是感觉到脑瓜疼,跨域跨域有又跨域,让后台们用CORS...办法,然后自己就等呀等呢!
其实前端也能解决...

我用 create-react-app 创建的项目,执行了npm run eject 之后 webpack 暴露了...但是不着急

还可以在项目 -- config -- webpacKDEvServer.config.js 下更改

    // 原数据
    module.exports = function (Proxy, allowedHost) {
       return {
           ...
           proxy,
           ...  
      }
    }
    // 更改
     module.exports = function (proxy, allowedHost) {
       return {
           ...
           proxyproxy: {
              '/v1': {   
                target: 'http://www.xxx.COM',
                changeOrigin: true,
                secure: false,
              },
            },
           ...  
      }
    }
    
    // AXIOS地址也要进行下修改
     $.ajax({
        url:'/v1/code',   // 地址不需要写域名啦
        tyPE:'POST',
        dataType:'json',
        success:function(data){
          console.LOG(data);
        },
        error:function(error){
          console.log(error)
        }
      })

然后就可以继续写代码啦♪(^∇^*)!

最后附赠两幅图
一个是webpackDevServer.config.js更改前
一个是webpackDevServer.config.js更改后的...
有没有感觉很贴心
O(∩_∩)O哈哈~

React  Axios 解决前端跨域 代理 Proxy

React  Axios 解决前端跨域 代理 Proxy

脚本宝典总结

以上是脚本宝典为你收集整理的React Axios 解决前端跨域 代理 Proxy全部内容,希望文章能够帮你解决React Axios 解决前端跨域 代理 Proxy所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。