මගේ ජාවාස්ක්‍රිප්ට් කේතය සිදු වූ විට තැපැල්කරුට “ඉල්ලුම් කළ සම්පතෙහි“ ප්‍රවේශ-පාලක-ඉඩ දෙන්න-මූලාරම්භය නැත ”යන ශීර්ෂය නොලැබෙන්නේ ඇයි?

මෝඩ් සටහන : මෙම ප්‍රශ්නය XMLHttpRequest හි ආකාරයටම තැපැල්කරු CORS සීමාවන්ට යටත් නොවන්නේ මන්ද යන්නයි. මෙම ප්‍රශ්නය "ප්‍රවේශ-පාලනය-ඉඩ දෙන්න-සම්භවය" ... "දෝෂයක් නිවැරදි කරන්නේ කෙසේද යන්න ගැන නොවේ .

කරුණාකර පළ කිරීම නවත්වන්න :

• සූර්යයාට යටින් ඇති සෑම භාෂාවක් / රාමුවක් සඳහාම CORS වින්‍යාස කිරීම. ඒ වෙනුවට ඔබේ අදාළ භාෂාව / රාමුවේ ප්‍රශ්නය සොයා ගන්න .
• CORS මග හැරීමට ඉල්ලීමකට ඉඩ දෙන තෙවන පාර්ශවීය සේවාවන්
• විවිධ බ්‍රව්සර් සඳහා CORS අක්‍රිය කිරීම සඳහා විධාන රේඛා විකල්ප

මම භාවිතා බලය කරන්න උත්සාහ කරනවා JavaScript කිරීමට සම්බන්ධ කිරීමෙන් ඔයාගෙද API බිල්ට් කුලාව . කෙසේ වෙතත්, මම ඉල්ලීම කරන විට, මට පහත දෝෂය ලැබේ:

XMLHttpRequest හට http: // myApiUrl / login පූරණය කළ නොහැක . ඉල්ලූ සම්පතෙහි 'ප්‍රවේශ-පාලනය-ඉඩ දෙන්න-සම්භවය' ශීර්ෂයක් නොමැත. එබැවින් මූලාරම්භය 'ශූන්‍යය' වෙත ප්‍රවේශ වීමට අවසර නැත.

ඒපීඅයි හෝ දුරස්ථ සම්පත් ශීර්ෂකය සැකසිය යුතු බව මම දනිමි, නමුත් මම ක්‍රෝම් දිගුව තැපැල්කරු හරහා ඉල්ලීම කළ විට එය ක්‍රියාත්මක වූයේ ඇයි ?

ඉල්ලීම් කේතය මෙයයි:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

මම එය නිවැරදිව තේරුම් ගත්තා නම්, ඔබ කරන්නේ ඔබේ පිටුව ක්‍රියාත්මක වීමට වඩා වෙනස් වසමකට XMLHttp ඉල්ලීමක් කිරීමයි. ආරක්‍ෂිත හේතූන් මත එකම මූලාරම්භයේ ඉල්ලීමකට සාමාන්‍යයෙන් ඉඩ දෙන බැවින් බ්‍රව්සරය එය අවහිර කරයි. හරස් වසම් ඉල්ලීමක් කිරීමට ඔබට අවශ්‍ය විට ඔබ වෙනස් දෙයක් කළ යුතුය. එය සාක්ෂාත් කර ගන්නේ කෙසේද යන්න පිළිබඳ නිබන්ධනයක් වන්නේ CORS භාවිතා කිරීමයි .

ඔබ තැපැල් ස්ථානාධිපතිවරයා භාවිතා කරන විට ඔවුන් මෙම ප්‍රතිපත්තියෙන් සීමා නොවේ. හරස් ප්‍රභවයෙන් උපුටා ගත් XMLHttpRequest :

නිත්‍ය වෙබ් පිටුවලට දුරස්ථ සේවාදායකයන්ගෙන් දත්ත යැවීමට සහ ලැබීමට XMLHttpRequest වස්තුව භාවිතා කළ හැකි නමුත් ඒවා එකම මූල ප්‍රතිපත්තියෙන් සීමා වේ. දිගු කිරීම එතරම් සීමිත නොවේ. දිගුවකට එහි මූලාරම්භයෙන් පිටත දුරස්ථ සේවාදායකයන් සමඟ කතා කළ හැකිය, එය මුලින් හරස් ප්‍රභව අවසර ඉල්ලා සිටින තාක් කල්.

අවවාදයයි: භාවිතා Access-Control-Allow-Origin: *කිරීමෙන් ඔබගේ API / වෙබ් අඩවිය හරස් අඩවි ඉල්ලීම් ව්‍යාජ (CSRF) ප්‍රහාරයන්ට ගොදුරු විය හැකිය. මෙම කේතය භාවිතා කිරීමට පෙර අවදානම් ඔබ තේරුම් ගෙන ඇති බවට වග බලා ගන්න .

ඔබ PHP භාවිතා කරන්නේ නම් විසඳීම ඉතා සරල ය . ඉල්ලීම හසුරුවන ඔබේ PHP පිටුවේ ආරම්භයේ පහත ස්ක්‍රිප්ට් එක් කරන්න:

<?php header('Access-Control-Allow-Origin: *'); ?>

ඔබ Node-red භාවිතා කරන්නේ නම් පහත දැක්වෙන රේඛා විවරණය කිරීමෙන් node-red/settings.jsගොනුවේ CORS වලට ඉඩ දිය යුතුය :

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

ඔබ ප්‍රශ්නයට සමාන ෆ්ලැස්ක් භාවිතා කරන්නේ නම් ; ඔබ මුලින්ම ස්ථාපනය කළ යුතුයිflask-cors

$ pip install -U flask-cors

ඉන්පසු ඔබේ යෙදුමට ෆ්ලස්ක් කෝර්ස් ඇතුළත් කරන්න.

from flask_cors import CORS

සරල යෙදුමක් මෙසේ පෙනේ:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

වැඩි විස්තර සඳහා, ඔබට ෆ්ලස්ක් ප්‍රලේඛනය පරීක්ෂා කළ හැකිය .

මන්ද
$ .ajax ({type: "POST" - OPTIONS
call .post අමතයි ( - POST අමතන්න

දෙකම වෙනස් ය. තැපැල්කරු "POST" නිසියාකාරව අමතයි, නමුත් අපි එය අමතන විට එය "විකල්ප" වනු ඇත.

C # වෙබ් සේවා සඳහා - වෙබ් API

ඔබගේ දී පහත දැක්වෙන කේතය කරුණාකර එක් කරන්න web.config යටතේ <system.webServer> ටැගය ගොනුව. මෙය ක්‍රියාත්මක වනු ඇත:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

කරුණාකර ඔබ අජැක්ස් ඇමතුමේ කිසිදු වැරැද්දක් නොකරන බවට වග බලා ගන්න

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

සටහන: ඔබ තෙවන පාර්ශවීය වෙබ් අඩවියකින් අන්තර්ගතය බාගත කිරීමට සොයන්නේ නම් මෙය ඔබට උදව් නොකරනු ඇත . ඔබට පහත කේතය උත්සාහ කළ හැකිය, නමුත් ජාවාස්ක්‍රිප්ට් නොවේ.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

CORS සීමාවක් යෙදීම යනු සේවාදායකයකු විසින් අර්ථ දක්වා ඇති බ්‍රව්සරයක් මඟින් ක්‍රියාත්මක කරන ආරක්ෂක ලක්ෂණයකි .

බ්‍රව්සරය සේවාදායකයේ CORS ප්‍රතිපත්තිය දෙස බලා එයට ගරු කරයි.

කෙසේ වෙතත්, තැපැල්කරු මෙවලම සේවාදායකයේ CORS ප්‍රතිපත්තිය ගැන කරදර වන්නේ නැත.

CORS දෝෂය බ්‍රව්සරයේ දිස්වන්නේ නමුත් තැපැල්කරු තුළ නොවේ.

පහත දැක්වෙන විමර්ශනයේදී API ලෙස, මම ඔබේ ප්‍රශ්නයෙන් http: // myApiUrl / login වෙනුවට http://example.com භාවිතා කරමි , මන්ද මෙම පළමු එක ක්‍රියාත්මක වන බැවිනි.

ඔබගේ පිටුව http: //my-site.local: 8088 හි ඇතැයි මම සිතමි .

ඔබ වෙනස් ප්‍රති results ල දැකීමට හේතුව තැපැල්කරු:

• ශීර්ෂකය සකසන්න Host=example.com(ඔබගේ API)
• ශීර්ෂකය සකසා නැත Origin

වෙබ් අඩවිය සහ ඒපීඅයි එකම වසමක් ඇති විට මෙය බ්‍රව්සර් ඉල්ලීම් යැවීමේ ක්‍රමයට සමාන වේ (බ්‍රව්සර් ද ශීර්ෂ අයිතමය සකසයි Referer=http://my-site.local:8088, කෙසේ වෙතත් මම එය තැපැල්කරු තුළ නොදකිමි). ශීර්ෂකය සකසා නොමැති විට , සාමාන්‍යයෙන් සේවාදායකයන් එවැනි ඉල්ලීම් පෙරනිමියෙන් ලබා දේ.Origin

තැපැල්කරු ඉල්ලීම් යවන සම්මත ක්‍රමය මෙයයි. නමුත් ඔබේ වෙබ් අඩවිය සහ ඒපීඅයි විවිධ වසම් ඇති විට බ්‍රව්සරයක් වෙනස් ආකාරයකින් ඉල්ලීම් යවයි , පසුව CORS සිදු වන අතර බ්‍රව්සරය ස්වයංක්‍රීයව:

• ශීර්ෂකය සකසයි Host=example.com(ඔබගේ API ලෙස)
• ශීර්ෂකය සකසයි Origin=http://my-site.local:8088(ඔබේ වෙබ් අඩවිය)

(ශීර්ෂයට Refererසමාන අගයක් ඇත Origin). දැන් ක්‍රෝම් හි කොන්සෝලය සහ ජාල පටිත්තෙහි ඔබට පෙනෙනු ඇත:

ඔබ සතුව Host != Originමෙය CORS වන අතර, සේවාදායකයා එවැනි ඉල්ලීමක් හඳුනාගත් විට, එය සාමාන්‍යයෙන් එය පෙරනිමියෙන් අවහිර කරයි .

Origin=nullඔබ දේශීය නාමාවලියකින් HTML අන්තර්ගතය විවෘත කරන විට සකසා ඇති අතර එය ඉල්ලීමක් යවයි. <iframe>පහත දැක්වෙන ස්නිපටයේ මෙන් ඔබ ඉල්ලීමක් යවන විටත් එම තත්වයම වේ (නමුත් මෙහි Hostශීර්ෂකය කිසිසේත් සකසා නැත) - පොදුවේ ගත් කල, සෑම තැනකම HTML පිරිවිතරයන් පාරදෘශ්‍ය සම්භවයක් ඇති බව පවසන විට ඔබට එය පරිවර්තනය කළ හැකිය Origin=null. මේ පිළිබඳ වැඩි විස්තර ඔබට මෙහි සොයාගත හැකිය .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

ඔබ සරල CORS ඉල්ලීමක් භාවිතා නොකරන්නේ නම්, සාමාන්‍යයෙන් බ්‍රව්සරය ස්වයංක්‍රීයව ප්‍රධාන ඉල්ලීම යැවීමට පෙර විකල්ප ඉල්ලීමක් යවයි - වැඩි විස්තර මෙහි ඇත. පහත දැක්වෙන ස්නිපටය එය පෙන්වයි:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

CORS ඉල්ලීම් වලට ඉඩ දීම සඳහා ඔබේ සේවාදායකයේ වින්‍යාසය වෙනස් කළ හැකිය.

Nginx (nginx.conf ගොනුව) මත CORS සක්‍රිය කරන උදාහරණ වින්‍යාසය මෙන්න - always/"$http_origin"nginx සහ "*"Apache සඳහා සැකසීමේදී ඉතා ප්‍රවේශම් වන්න - මෙය ඕනෑම වසමකින් CORS අවහිර කරනු ඇත.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Apache (.htaccess ගොනුව) මත CORS සක්‍රිය කරන උදාහරණ වින්‍යාසය මෙන්න.

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

විවිධ භාවිත අවස්ථා වලදී එකම දෝෂය ඇතිවිය.

නඩුව භාවිතා කරන්න: කෝණික භාෂාවෙන් වසන්ත REST අවසාන ලක්ෂ්‍යය ඇමතීමට උත්සාහ කළ විට ක්‍රෝම් හි.

විසඳුම: අදාළ පාලක පන්තියට ඉහළින් @CrossOrigin ("*") විවරණය එක් කරන්න .

ඔබ ඔබේ මැද ස්ථරය ලෙස .NET භාවිතා කරන්නේ නම්, මාර්ග ගුණාංගය පැහැදිලිව පරීක්ෂා කරන්න, උදාහරණයක් ලෙස

මේ වගේ වෙලාවක මට ප්‍රශ්නයක් තිබුණා,

[Route("something/{somethingLong: long}")] //Space.

මෙයින් එය සවි කර ඇත,

[Route("something/{somethingLong:long}")] //No space

.NET Core වෙබ් API ව්‍යාපෘතිය සඳහා පමණක්, පහත වෙනස්කම් එක් කරන්න:

1. Startup.cs ගොනුවේ ක්‍රමයට services.AddMvc()පේළියට පසුව පහත කේතය එක් කරන්න ConfigureServices():

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Startup.cs ගොනුවේ ක්‍රමයට app.UseMvc()පේළියෙන් පසු පහත කේතය එක් කරන්න Configure():

app.UseCors(options => options.AllowAnyOrigin());

3. වසමෙන් පිටත ඔබට ප්‍රවේශ වීමට අවශ්‍ය පාලකය විවෘත කර පාලක මට්ටමින් මෙම ගුණාංගය එක් කරන්න:

[EnableCors("AllowOrigin")]