请选择 进入手机版 | 继续访问电脑版

HTML5星空

[S3-E411]react闲谈——用proxy 1分钟解决跨域问题

[复制链接]
发表于 2017-8-30 18:20:15 | 显示全部楼层 |阅读模式

本文:【第3章第411回】 文章底部可跳转至 目录 查看更多文章


这已经是个老生常谈的问题了,对于前后端分离的前端工程师来说,遇到这个问题总是会想尽各种办法,比如后端配置cors,前端用script包装。


这是个让人头痛的


XMLHttpRequest cannot load http://www.xxx.com/login. 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:3213' is therefore not allowed access.


上面这段英文提示就是常见的跨域报错,首先,我是在react工程项目中做的测试,前端项目开启的是本地的3213端口,而后端login的API接口在www.xxx.com域名下面。


为了保证前端测试的可行性,为了你的老板不扣你工资,用一个最简单的办法解决API资源请求跨域问题: http-proxy-middleware


http-proxy-middleware不需要自己安装,在安装webpack过程中,会自动依赖安装到你的node_modules文件夹下,如果你发现没有,那么请自行安装


npm install --save-dev http-proxy-middleware


在react开发中,分下面2种情况。


1、前端部署了nodejs服务器,采用app.listen()启动前端服务器,那么你只需要在你的js中添加下面几行代码即可

假设你的前端服务器js文件叫做server.js


//导入proxy

var proxy = require('http-proxy-middleware')


//context可以是单个字符串,也可以是多个字符串数组,分别对应你需要代理的api,星号(*)表示匹配当前路径下面的所有api

const context = [`/login`, `/admin/*`]


//options可选的配置参数请自行看readme.md文档,通常只需要配置target,也就是你的api所属的域名。

const options = {

    target: 'http://www.xxx.com',

    changeOrigin: true

}


//将options对象用proxy封装起来,作为参数传递

const apiProxy = proxy(options)


//现在你只需要执行这一行代码,当你访问需要跨域的api资源时,就可以成功访问到了。

app.use(context, apiProxy)


2、你可能没有前端node服务器,但是你用来webpack的devServer来启动前端项目,这个时候的配置跟上面类似。


在你的webpack.config.js里面添加proxy配置。


    //导入proxy

    var proxy = require('http-proxy-middleware')

    

    //context可以是单个字符串,也可以是多个字符串数组,分别对应你需要代理的api,星号(*)表示匹配当前路径下面的所有api

    const context = [`/login`, `/admin/*`]

    

    module.exports = {

        devServer: {

           host: 'localhost',

           port: '3011',

           proxy: [

               {

                    context: context,

                    target: 'https://www.xxx.com',

                    secure: false

              }

           ]

        }

    }


现在,跨域将不会成为你的烦恼,可以放心写代码了。



转自:https://segmentfault.com/a/1190000008635891

作者: 二月


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

更多文章点击 目录 查看http://mp.weixin.qq.com/mp/homepage?__biz=MzAwMzMxOTUxOA==&hid=9&sn=c494536c68e349573ce6b2061aecd590

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


 ==========阅读原文==========


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快讯
发布主题 快速回复 返回列表

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 02:39 , Processed in 0.151891 second(s), 35 queries .

快速回复 返回顶部 返回列表