跨域解决方式

跨域问题

1、服务端解决办法:

使用如下标头可以接受全部网站请求:

header('Access-Control-Allow-Origin:*')

  使用如下标头可以接受指定网站请求:

header('Access-Control-Allow-Origin:http://www.abc.com')

  所以,服务器写法:

header('Access-Control-Allow-Origin:*');

  ajax写法和平常一样:
  

<script>
    $.ajax({
        url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',
        dataType:'json',
        success:function(data){
            alert(data.msg);
        }
    });
</script>
2、使用jsonp跨域请求

服务器:

不修改

客服端

<script>
    $('#btn').on('click',function(){
                $.ajax({
                    url: 'http://www.baidu.com',
                    type: 'GET',
                    dataType: 'JSONP',
                    jsonp: 'callback',
                    jsonpCallback: 'callback1',
                    success:function(data)alert(data.username)
                    }
                })
            });
    });
</script>
在ajax请求中,使用jsonp数据格式,所以讲dataType参数设置为jsonp,平常,还加到了jsonp和jsonpCallback两个参数,结合代码,不难看出这两个参数作用:

  jsonp的作用是设置服务器获取回调函数名称参数的下标参数,jsonpCallback的作用就是设置回调函数,相当于input标签中name和value,jsonp对应name,value对应jsonpCallback。

详细解释链接(别人的东西)

http://www.cnblogs.com/duanhuajian/p/3152617.html
http://www.360doc.com/content/14/1030/09/5054188_421070813.shtml
Vue 中解决方式有以下几种: 1. 通过服务端配置 CORS(资源共享):在服务端的响应头中设置 `Access-Control-Allow-Origin` 字段,允许指定的名进行访问。这种方式需要服务端的支持,如果你是自己搭建的服务端,可以参考以下示例代码: ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api') def api(): response = jsonify({'hello': 'world'}) # 允许指定的名进行访问 response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080' return response if __name__ == '__main__': app.run() ``` 2. 通过代理解决问题:在 Vue 的 `config/index.js` 中配置代理,将请求转发到本地的服务端,再由服务端进行真正的请求。这种方式不需要服务端的支持,但需要在本地搭建一个服务端。示例代码如下: ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:5000', // 本地的服务端地址 changeOrigin: true, pathRewrite: { '^/api': '/api' // 将请求的 /api 前缀转发到本地的 /api 路径 } } } } } ``` 3. JSONP(JSON with Padding):通过动态创建 `script` 标签来访问服务端接口,服务端返回的数据需要用一个函数包裹,以便在客户端中执行。这种方式只支持 GET 请求,并且需要服务端的支持。示例代码如下: ```javascript const script = document.createElement('script') script.src = 'http://example.com/api?callback=handleResponse' document.body.appendChild(script) function handleResponse(response) { console.log(response) } ``` 4. WebSocket :通过 WebSocket 协议进行双向通信,不受同源策略的限制。这种方式需要服务端的支持,并且需要在客户端和服务端都进行相应的配置。示例代码如下: ```javascript const socket = new WebSocket('ws://example.com/socket') socket.onopen = function(event) { console.log('WebSocket 已连接!') socket.send('Hello WebSocket!') } socket.onmessage = function(event) { console.log('收到消息:', event.data) } socket.onclose = function(event) { console.log('WebSocket 已关闭!') } ``` 以上是 Vue 中解决方式的一些常见示例,具体的解决方案需要根据实际情况进行选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值