配置proxy解决跨域问题

用一个最简单的方法解决API资源请求跨域问题:http-proxy-middleware

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

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

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来启动前端项目,这个时候的配置跟上面类似。

(1)、在你的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
              }
           ]
        }
    }

(2)、Umi配置

解决跨域需要在webpack配置proxy,而umi没有weppack.config.js

是因为umi将webpack配置保存在.umirc.js的配置文件中。
所以我们需要在.umirc.js文件加上(或者修改target路径)

.umirc.js文件加上:

"proxy": {
        "/api": {   //代理的api,要和nginx配置的一直
            "target": "http://192.168.1.100:5000"
            "changeOrigin": true,
            "pathRewrite": function (path, req) {
                // 实用其他ip打开下面
                //  path = path.split(‘/‘);
                //  path[2] = ‘default‘;
                //  return path.join(‘/‘);
                //   支线代码

                //  if (IS_DEBUG)
                //      path = path.replace(‘urrm‘, ‘default‘);
                return path;
            }
        }

    },

或者如果创建多个域

 "proxy": {
    "/api/RoomApi": {
      "target": "http://open.douyucdn.cn",
      "changeOrigin":true
    },
    "/api/v1":{
      "target":"http://capi.douyucdn.cn",
      "changeOrigin":true
    }
  }

原文地址:https://www.cnblogs.com/zsy0712/p/12192297.html

时间: 2024-10-09 11:41:47

配置proxy解决跨域问题的相关文章

修改浏览器属性配置的作用---开发机上解决跨域的方式

开发阶段解决跨域问题,可以通过修改浏览器属性配置,来关闭浏览器的同源策略保护机制,从而实现解决跨域问题,有下面三种方式:1. MAC系统,终端输入代码段 "open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/admin/MyChromeDevUserData/" 2.window系统,cmd输入代码段 "C:\Program Files (

nginx解决服务器宕机、解决跨域问题、配置防盗链、防止DDOS流量攻击

解决服务器宕机 配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location / { proxy_connect_timeout 1; proxy_send_timeout 1; proxy_read_timeout 1; proxy_pass http://backserver; index index.html index.htm; } proxy_connect_timeout 1; :连接超时1秒 proxy_send_timeout 1; :请求超时1秒 pr

vue项目开发,用webpack配置解决跨域问题

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 2,使用jsonp进行跨域 getData () { var self = this $.

vue webpack配置解决跨域问题

现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 http.js post (url, data) { return axios({ method: 'post', baseURL: '/api', url, data: data, timeout: 10000, headers: { 'X-Requested-With': 'XMLHttpRe

前端开发如何独立解决跨域问题

背景 跨域是由浏览器同源策略引起的,是指页面请求的接口地址,必须与页面url地址处于同域上(即域名,端口,协议相同).这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制. 这个措施出发点是好的,但在项目开发的过程中,常常给前端开发者带来麻烦. 由于页面开发中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利进行接口调用. 解决跨域问题常用的解决方案有两个

使用nginx解决跨域问题(flask为例)

背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax请求api,但是我们不得不ajax请求中间层,中间层再请求api.如图: 为了少敲代码,提高工作效率,我们当然希望将python中间层砍掉,但是如何解决以下三个问题,成为关键: 后端渲染 登录状态判定 跨域转发api 关于1,2我会在另外两篇博客中详细叙述,这篇文章主要解决3,也就是跨域问题.解决跨

vue开发环境和生产环境里面解决跨域的几种方法

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu.com访问https://a.baidu.com: #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80: #域名跨域 http://a.baidu.com访问http://b.baidu.com:   现在很多公司都是采用前后分离的方式开发.那么出现经常和会

vue-cli3以上框架解决跨域问题

事实上,3以上的版本安装好以后没有主配置文件,它不像2的版本有专门的config文件夹可以处理配置,所以我们需要新建vue.config.js  [默认情况下,3以上的版本可以直接识别这个js文件,把它当做自己的配置文件] 步骤如下: 1.在项目框架的根目录下新建文件:vue.config.js 2.重启项目,这样的话新建的文件就可以被识别了 3.给新建的文件内添加解决跨域的代码部分 module.exports = { outputDir: 'serve', //build输出目录 asset

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端