react总结之axios(解决跨域)

简介: react总结之axios(解决跨域)

一、什么是跨域?

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。浏览器从一个域名的网页去请求另一个域名的资源时,出现域名、端口、协议任一不同,都属于跨域。


二、解决跨域

1.第一种

在package.json里面添加一行代码即可(这个方法只能写一个域名)

proxy:“你请求服务器的域名”

2.第二种

在src文件下创建一个setupProxy.js文件,在里面填写以下代码即可(这个方法可以填写多个域名)这里注意

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      "/api", //遇见/api-elm前缀的请求,就会触发该代理配置
      {
        target: "服务器域名", //请求转发给谁(能返回数据的服务器地址)
        changeOrigin: true, //控制服务器收到的响应头中Host字段的值
        secure: false,
        // pathRewrite: {
        //   "^/api": "",
        // }, //重写请求路径,保证交给后台服务器是正常地请求地址(必须配置)
      }
    )
  );
};


总结

两种方法都是可以去进行解决跨域问题的,但他们有一点是要看你的域名是否是多个,如果是多个的话就要使用第二种方法了,如果只是一个的话就使用第一种方法即可

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
6天前
|
前端开发 JavaScript CDN
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
130 0
|
6天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
5月前
Axios 通过a标签下载文件 跨域下载
Axios 通过a标签下载文件 跨域下载
Axios 通过a标签下载文件 跨域下载
|
8月前
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
504 0
|
6天前
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
68 0
|
6天前
|
移动开发 JavaScript 前端开发
ElementUI实现登录注册啊,axios全局配置,CORS跨域
ElementUI实现登录注册啊,axios全局配置,CORS跨域
44 0
|
5月前
|
SQL JavaScript 前端开发
ElementUI之登陆+注册->饿了吗完成用户登录界面搭建,axios之get请求,axios之post请求,跨域,注册界面
ElementUI之登陆+注册->饿了吗完成用户登录界面搭建,axios之get请求,axios之post请求,跨域,注册界面
34 0
|
5月前
|
前端开发 JavaScript API
原来这才是学习axios的正确姿势(安装、使用、跨域代理一站式解决)
Axios 是一个基于 promise 的 异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求,负责与后端交互。
164 1
|
6月前
|
JSON 前端开发 API
React+Axios调用api并且渲染在前端界面
React+Axios调用api并且渲染在前端界面
116 0
|
6月前
|
自然语言处理 JavaScript 前端开发
【Vue.js】使用Element入门搭建登入注册界面&axios中GET请求与POST请求&跨域问题
【Vue.js】使用Element入门搭建登入注册界面&axios中GET请求与POST请求&跨域问题
232 0