3种跨域

迈不过友情╰ 2021-10-09 03:04 319阅读 0赞

三种跨域方式

1.  CORS跨域

服务端设置，前端直接调用

let url='httl://www.imooc. com/mock/user/login'
    axios.get(url).then( res=> {
        
        
    })
    
    响应头Response Headers:
     Access-Control-Allow-Origin: http://localhost:8080  (后台允许这个url访问)
     Access-Control-Allow-Credentials:  true   （允许前端携带cookie过去）

2. JSONP跨域

前端适配（插件），后台配合 （同时改）

cnpm i jsonp --save-dev

import  jsonp from 'jsonp' （app.vue）

import jsonp from 'jsonp'
    jsonp(url, (err, res) => {
        let result = res
        this.data = result
    
    })

![20200408155408280.png][]

![20200408155258221.png][]

回调函数\_\_jp0,函数参数是返回的数据。

浏览器的Network的XHR里面没有，在js中。实际请求的是js代码。

3. 接口代理--修改nginx服务器      Proxy跨域

前端修改，后台不动

建立vue.config.js

module.exports = {
        devServer: {
        host:'localhost',
        port: 8081,
        proxy: {
          '/api': {
            target: 'http://localhost:8081/#',
            changeOrigin: true,
            pathRewrite:{
              '/api':''      //把api后面的一截地址拼接到target后面，再转发
            }
          }
        }
      }
    
    }

请求数据放在APP.vue

mounted() {
      let url='https://www.imooc.com/user/login'
      jsonp(url ,( err, res) => {
        let result = res
        this.data =  result
    
      })
    }

[20200408155408280.png]: /images/20211009/6916f8a5a7fe4b65ae8d1544b3c14392.png
[20200408155258221.png]: /images/20211009/7fb5cc2d3b16441a98dda01ab2ac34c8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关跨域解决方案（9种）

什么是跨域说起跨域，就要知道什么是浏览器[同源策略][Link 1] 浏览器同源策略：必须是协议、域名、端口完全一致的才符合同源策略如果以上三项，有一项不同都涉及

偏执的太偏执、/ 2024年03月26日 18:37/ 0 赞/ 81 阅读

相关跨域9种解决方案

什么是跨域说起跨域，就要知道什么是浏览器同源策略浏览器同源策略：必须是协议、域名、端口完全一致的才符合同源策略如果以上三项，有一项不同都涉及到跨域问题 ---

谁践踏了优雅/ 2023年10月11日 16:32/ 0 赞/ 42 阅读

相关 SpringBoot 前端访问跨域的3种方案

前后端分离大势所趋，跨域问题更是老生常谈，随便用标题去google或百度一下，能搜出一大片解决方案，那么为啥又要写一遍呢，不急往下看。 > 问题背景： Same Origi

川长思鸟来/ 2023年10月01日 18:27/ 0 赞/ 4 阅读

相关跨域、跨域问题

跨域(CORS)是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the

朴灿烈づ我的快乐病毒、/ 2023年09月27日 00:59/ 0 赞/ 195 阅读

相关跨域的几种解决方案,java处理跨域,前端处理跨域

跨域目前是广大开发者经常遇到的一个问题.在此我将几种常用的解决方案介绍一下 1:JSONP JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，缺点是

冷不防/ 2022年12月07日 15:10/ 0 赞/ 250 阅读

相关 Spring Boot 解决跨域问题的 3 种方案

前后端分离大势所趋，跨域问题更是老生常谈，随便用标题去google或百度一下，能搜出一大片解决方案，那么为啥又要写一遍呢，不急往下看。问题背景： > Same Origi

偏执的太偏执、/ 2022年11月19日 14:58/ 0 赞/ 140 阅读

相关七种跨域方法

`七种跨域方法【1.CROS篇】` <!DOCTYPE html> <html lang="en"> <head> <meta c

逃离我推掉我的手/ 2022年05月27日 13:09/ 0 赞/ 228 阅读

相关跨域的四种方式

本文主要是关于跨域的几种方式，关于什么是跨域这里就不多说了，写这个也是为了记住一些知识点的。一. jsonp jsonp的跨域方式很容易理解，页面的的每一个scrip

小鱼儿/ 2022年03月07日 06:52/ 0 赞/ 288 阅读

相关 3种跨域

三种跨域方式 1. CORS跨域服务端设置，前端直接调用 let url='httl://www.imooc. com/mock/user/login'

迈不过友情╰/ 2021年10月09日 03:04/ 0 赞/ 320 阅读

相关 Spring Boot 解决跨域问题的 3 种方案

点击上方 [Java后端][Java]，选择设为星标优质文章，及时送达 -------------------- 前后端分离大势所趋，跨域问题更是老生常谈，随便用标题

布满荆棘的人生/ 2021年09月07日 05:59/ 0 赞/ 297 阅读