精华内容
下载资源
问答
  • 2022-04-23 23:06:29

    解决接口的跨域问题


    前言

    在我们使用express去写接口的时候,存在一个很严重的问题:不支持跨域请求。
    目前解决接口跨域问题的方案主要分两种:
    1、CORS(主流的解决方案,推荐使用)
    2、JSONP(程序员使用漏洞解决,缺陷是只支持 GET 请求)

    一、CORS 跨域资源共享

    1、引入相关的中间件

    我们需要下载相关的包

    npm install cors
    

    2、使用中间件

    在我们接口的入口文件引入中间件

    const cors = require('cors') 
    

    3、配置中间件

     app.use(cors()) 
    

    4、了解cors

    CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列 HTTP 响应头组成,通过配置请求头来解决

    决定是否跨域的问题,浏览器的同源安全策略默认会阻止网页“跨域”获取资源,如果接口服务器配置了 CORS 相

    关的 HTTP 响应头,就可以解除浏览器端的跨域访问限制。

    CORS 响应头部可以携带一个 Access-Control-Allow-Origin 字段

    Access-Control-Allow-Origin:<origin> | *
    

    origin 参数的值指定了允许访问该资源的外域 URL,例如:

    res.setHeader:('Access-Control-Allow-Origin','http://www.baidu.com' )
    

    这样只允许来自 http://www.baidu.com 的请求了。

    如果指定了 Access-Control-Allow-Origin 字段的值为通配符 *,表示允许来自任何域的请求

    res.setHeader:('Access-Control-Allow-Origin','*' )
    

    默认情况下,CORS 仅支持客户端向服务器发送如下的 9 个请求头:

    Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、
    Content-Type

    如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过 Access-Control-Allow-Headers 对额外

    的请求头进行声明,否则这次请求会失败!

    CORS 仅支持客户端发起 GET、POST、HEAD 请求。

    如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-

    Methods来指明实际请求所允许使用的 HTTP 方法,即:

    允许GET,POST:res.setHeader:('Access-Control-Alow-Methods','GET,POST' )
    
    允许全部:res.setHeader:('Access-Control-Alow-Methods','*' )
    

    CORS请求的分类:

    客户端在请求 CORS 接口时,根据请求方式和请求头的不同,可以将 CORS 的请求分为两大类,分别是:
    1、 简单请求
    2、 预检请求

    区别:
    简单请求的特点:客户端与服务器之间只会发生一次请求。
    预检请求的特点:客户端与服务器之间会发生两次请求,OPTION 预检请求成功之后,才会发起真正的请求

    二、使用JSONP解决

    1、了解

    1、浏览器端通过 <script> 标签的 src 属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求

    据的方式叫做 JSONP,也就是利用了程序的漏洞来解决跨域

    2、JSONP 不属于真正的 Ajax 请求,因为它没有使用 XMLHttpRequest 这个对象。

    JSONP 仅支持 GET 请求,不支持 POST、PUT、DELETE 等请求。

    3、如果项目中已经配置了 CORS 跨域资源共享,为了防止冲突,必须在配置 CORS 中间件之前声明 JSONP 的

    接口。否则JSONP 接口会被处理成开启了 CORS 的接口

    2、使用

    使用步骤:

    1、获取客户端发送过来的回调函数的名字

    2、得到要通过 JSONP 形式发送给客户端的数据

    3、根据前两步得到的数据,拼接出一个函数调用的字符串

    4、把上一步拼接得到的字符串,响应给客户端的

    相关代码:

    app.get('/api/jsonp', (req, res) => {
      const FunName = req.query.callback
      const data = { a: '1', b: '2' }
      const script = `${FunName}(${JSON.stringify(data)})`
      res.send(script)
    })
    

    在网页使用jQuery来请求:

      <script>
        $('#btn').on('click', () => {
          $.ajax({
            method: 'GET',
            url: 'http://127.0.0.1:3030/api/jsonp',
            dataType: 'jsonp',
            success: (res) => {
              console.log(res)
            }
          })
        })
      </script>
    

    更多相关内容
  • 最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 ...2. 上面的方法解决的是部分功能的跨域问题, 有的时候我们需要全局跨域,
  • VUE项目开发(如何搭建VUE开发环境请参见:如何搭建VUE开发环境_chanbzou1981的博客-CSDN博客)完成后需要部署发布,建议使用Nginx作为Web容器,因为支持反向代理,能方便地解决客户端跨域调用服务端接口问题。...

    目录

    背景

    下载并解压Nginx

    部署dist到Nginx中

    启动Nginx


    背景

    VUE项目开发(如何搭建VUE开发环境请参见:如何搭建VUE开发环境_chanbzou1981的博客-CSDN博客)完成后需要部署发布,建议使用Nginx作为Web容器,因为支持反向代理,能方便地解决客户端跨域调用服务端接口的问题。

    什么时跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域

    下载并解压Nginx

    下载稳定版本(nginx/Windows-1.20.2)即可。

    Mainline version——主线版本

    Stable version——稳定版本

    Legacy versions——旧版本

    nginx: download

    将下载的 nginx-1.20.2.zip解压得到nginx-1.20.2文件夹。

    部署dist到Nginx中

    将VUE打包得到的dist中的文件拷贝到Nginx的html目录下,例如:

    E:\nginx-1.20.2\html\

    启动Nginx

    Nginx默认监听的端口为80(在\conf\nginx.conf 文件中配置):

        server {

            listen       80;

            server_name  localhost;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;

            location / {

                root   html;

                index  index.html index.htm;

            }

    双击或者在命令行窗口中运行 nginx.exe

    访问http://localhost/验证部署成功(浏览网页服务默认的端口号都是80,因此只需输入网址即可,不用输入“: 80”了。)。

    PS:重启或停止Nginx的方法:

    1. 重启: nginx -s reload
    2. 停止: nginx.exe  -s stop 或 nginx.exe -s quit
    展开全文
  • 我们在移动端开发的时候,如果调用外部接口,容易出现跨域问题,问题如下: 英文描述: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's...

    我们在移动端开发的时候,如果调用外部接口,容易出现跨域问题,问题如下:
    在这里插入图片描述
    英文描述:

    The value of the ‘Access-Control-Allow-Origin’ header in the response
    must not be the wildcard ‘*’ when the request’s credentials mode is
    ‘include’。

    我们的解决方案:
    1、服务器端设置:

    Access-Control-Allow-Headers:Origin, Content-Type, cache-control,postman-token,Cookie, Accept
    Access-Control-Allow-Origin:*,(如果是指定域名,可以设置https://www.google.com,https://www.baidu.com )
    Access-Control-Allow-Credentials:true
    

    2、前端程序设置

    response.headers['Access-Control-Allow-Credentials'] = 'true'
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'POST'
    response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'
    

    3、VUE前端程序设置

    axios.defaults.withCredentials = true;
    
    展开全文
  • 解决taro h5在调用接口时出现跨域的情况 修改config下的index.js
  • module.exports = { devServer: { proxy: { '': { target: 'https://baidu.com', //此处输入你后端的地址 changeOrigin: true, pathRewrite: {} } } } } 在调用接口位置输入以下代码 ...

    谷歌浏览器报错:No 'Access-Control-Allow-Origin' header is present on the requested resource.

    火狐浏览器报错:已拦截跨源请求:同源策略禁止读取位于   --网址--  的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')

    注意:此教程只适用于vue cli 3创建的项目,vue cli 3 创建的项目没有config文件夹,如果你的项目中有config文件夹,那么你的项目可能是vue cli 2项目,此教程并不适用于vue cli 2项目

    教程开始 :

    1. 安装axios     npm install axios --save
       
    2. 在main.js 输入以下代码
      import axios from 'axios'
      Vue.prototype.$axios = axios
    3. 在package.json相同目录下创建vue.config.js    字母千万打错!!!
    4. 在vue.config.js输入以下代码 
      module.exports = {
      	devServer: {
      		proxy: {
      			'': {
      				target: 'https://baidu.com', //此处输入你后端的地址
      				changeOrigin: true,
      				pathRewrite: {}
      			}
      		}
      	}
      }
      
    5. 在调用接口位置输入以下代码
      this.$axios.get('此处输入你接口后面的地址').then(res => {
      	    console.log(res);
      	})
      })
    6. 最后一步,也是最关键的一步  :
      重启一下你的项目!!!!!
      重启一下你的项目!!!!! 
      重启一下你的项目!!!!! 

       (重要的事情说三遍!不重启不生效,切记!切记!切记!)
    展开全文
  • 接口调用跨域问题

    2019-03-18 16:29:00
    本次参考: https://www.jianshu.com/p/2e93f14e1807 详细: https://blog.csdn.net/wxb880114/article/details/80606434 package ... import org.springframework.context.annotation.Bean; impo...
  • 通过设置Access-Control-Allow-Origin来实现跨域。   例如:客户端的域名是client.taidupa.com,而请求的域名是server.taidupa.com。   如果直接使用ajax访问,会有以下错误:   XMLHttpRequest cannot ...
  • 今天小编就为大家分享一篇在LayUI图片上传中,解决跨域问题引起的请求接口错误的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在HTML用ajax跨域访问请求时报错: Access to XMLHttpRequest at ‘http://192.168.2.1:8080/portal/studentController.do?saveUserInfo’ from origin ‘http://oa.51.cn:3808’ has been blocked by CORS policy: ...
  • 前言 最近在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是...后来才知道是跨域问题(CORS),因为
  • 只不过ajax每次创建一个script标签会把之前得script给覆盖掉 4、用代理服务器解决接口跨域问题 什么是代理服务器?当我们请求访问某个页面或者接口的时候,被访问的服务器有特定的权限,不允许直接被访问,此时我们...
  • 页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数,由于两个页面不在一个域中,会提示没权限。如何解决问题呢,请看下面示例代码。
  • 1 跨域原因:浏览器同源策略         跨域指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。出于浏览器安全考虑...
  • 跨域配置 1、什么是跨域 浏览器从一个域名的网页去请求另一个域名的资源时,域名、...@CrossOrigin //解决跨域问题 @RequestMapping("/test") public class EduTeacherController { } 详情参考 注解@CrossOrigin详
  • 解决接口请求跨域问题

    千次阅读 2020-08-05 16:42:53
    解决接口请求跨域(浏览器可直接访问,接口请求报错) 问题原因:一般是由于接口访问端口受限,需要在接口响应配置设置请求头配置,允许跨域访问。 jsp页面接口引入cros.jsp相关内容 <% response.setHeader(...
  • 解决vue接口跨域问题

    2022-02-23 10:35:48
    首先要在当前文件的根目录下创建一个 vue.config.js 文件 (注意 封装axios) 把下面的代码复制粘贴进去 module.exports = { ... open: true, //允许跨域 proxy: { '/api': { target: 'http://65265.com/.
  • 在vue项目中,我们会遇到很多调用接口的场景,但是很多小白不知道怎样去处理,今天我们来简单的讲一下这个事情(作为一个小白选手,我也曾被这个简单的问题困扰许久所以想写个帖子作为记录,如果有哪里写的不对的地方...
  • 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,这篇文章主要介绍了如何用Nginx解决前端跨域问题,非常具有实用价值,需要的朋友可以参考下
  •  用Jquery中Ajax方式在asp.net开发环境中WebService接口调用 2、出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容); 3、解决方案: (1) JSONP:只支持GET方式 (2) CROS:...
  • vue-cli通过是本地代理的方式解决接口跨域问题的。但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyTable: { '/api': { //将www.exaple.com印...
  • 解决跨域调用

    2021-12-21 18:26:59
    目录 一、跨域 1.1 简介 1.2 CORS解决跨域 1.2.1 配置cors ...1.3 JSONP解决跨域 ...怎样解决跨域调用? 第一种:在服务端设置允许跨域调用的响应头信息 res.header('Access-Control-Allow-Ori...
  • golang接口解决跨域问题

    千次阅读 2020-10-10 14:51:08
    通过设置响应头,允许跨域请求的方式来解决。 首先编写设置响应头的中间件 package Cors import ( "net/http" "github.com/gin-gonic/gin" ) type Options struct { Origin string } func CORS(options ...
  • # 跨域支持 def after_request(response): # JS前端跨域支持 response.headers['Cache-Control'] = 'no-cache' response.headers['Access-Control-Allow-Origin'] = '*' return response #****** app.afte...
  • 【使用步骤】: 运行 npm install cors 安装中间件 使用 const cors = require(‘cors’) 导入中间件 在路由之前调用 app.use(cors()) 配置中间件 【代码优化:解决跨域问题】: // 导入express const express = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,231
精华内容 13,292
关键字:

如何解决接口调用的跨域问题